Custom Hooks
Subject: React
📍 What Are Custom Hooks?
A Custom Hook is a JavaScript function that starts with use and calls other hooks (like useState, useEffect, etc.).
They let you reuse stateful logic across components — making your code cleaner, modular, and easier to maintain.
🎯 Why Use Custom Hooks?
Problem:
You keep duplicating the same state logic in multiple components.
✅ Solution:
Extract that logic into a custom, reusable hook and use it wherever needed.
✅ When to Use a Custom Hook
| Use Case | Reason to Use a Custom Hook |
|---|---|
| Repeated use of useEffect | Abstract side effects like data fetching |
| Shared useState logic | Reuse input/toggle logic |
| Complex logic (timers etc.) | Clean up component code |
| Working with APIs/storage | Encapsulation and reusability |
🧱 Custom Hook Rules
- Must start with
use - Can call other hooks (
useState,useEffect, etc.) - Cannot be called inside loops, conditions, or nested functions
- Must follow normal React Hook Rules
✅ Basic Custom Hook Example: useCounter
🔧 useCounter.js
🧪 Usage in Component
✅ Custom Hook with useEffect: Fetch API
🔧 useFetch.js
🧪 Usage in Component
🧠 Benefits of Custom Hooks
| Benefit | Description |
|---|---|
| ♻️ Reusability | Use the same logic in multiple components |
| 🧼 Cleaner Code | Keeps component logic short and focused |
| 🧪 Testability | Hooks are just functions — easy to unit test |
| 🛠 Composability | Custom hooks can call other custom hooks |
📦 More Examples of Custom Hooks
| Custom Hook | Description |
|---|---|
useToggle() | Toggle a boolean value |
useLocalStorage() | Sync state with localStorage |
useDebounce() | Debounce fast-changing input values |
useWindowSize() | Track window width & height |
usePrevious() | Get the previous value of a prop/state |
📌 Summary Table
| Concept | Description |
|---|---|
| What is it? | A reusable function that uses other React Hooks |
| Naming | Must start with use |
| Return values | Typically returns an object with logic or state |
| Hook rules | Same as normal hooks — no conditional or loop calls |
| Benefits | Cleaner, reusable, composable, testable code |
🧠 Real-Life Analogy
A custom hook is like a power tool 🛠️ — once built, you can plug it in and reuse it in any project to speed up your workflow and reduce manual effort.
Advertisement Slot 1
Advertisement Slot 2