🪝 What Are Custom Hooks?
A Custom Hook is a JavaScript function that allows you to extract and reuse stateful logic across multiple React components. Like built-in Hooks, a custom Hook can call other Hooks such as useState, useEffect, useContext, and more.
Important
🎯 Why Use Custom Hooks?
As React applications grow, different components often contain similar state management and side-effect logic. Copying the same code into multiple components makes maintenance difficult. Custom Hooks allow this shared logic to be extracted into a reusable function while keeping each component clean and focused.
- Reuse stateful logic across multiple components.
- Reduce duplicate code.
- Keep components smaller and easier to understand.
- Improve code organization and maintainability.
📦 What Makes a Hook "Custom"?
| Characteristic | Description |
|---|---|
| Function | A custom Hook is an ordinary JavaScript function. |
| Name | Its name must begin with use. |
| Uses Hooks | It can call built-in Hooks or other custom Hooks. |
| Reusable | Its logic can be shared across multiple components. |
🔄 How Custom Hooks Work
💻 Example 1: A Simple Custom Hook
Creating a Custom Hook
import { useState } from "react";
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
function increment() {
setCount(c => c + 1);
}
return {
count,
increment
};
}This custom Hook encapsulates counter logic so it can be reused in any component.
💻 Example 2: Using the Custom Hook
Using useCounter
function Counter() {
const { count, increment } = useCounter();
return (
<>
<h2>{count}</h2>
<button onClick={increment}>
Increment
</button>
</>
);
}Every component that calls useCounter() receives its own independent state while reusing the same logic.
📊 Component Logic vs Custom Hook
| Without Custom Hooks | With Custom Hooks |
|---|---|
| Logic is duplicated across components. | Shared logic exists in one reusable function. |
| Larger, harder-to-maintain components. | Smaller, focused components. |
| Changes must be repeated everywhere. | Update the custom Hook once. |
| Lower code reusability. | Higher code reusability. |
📅 Custom Hook Lifecycle
A component calls a custom Hook during rendering.
The custom Hook executes its internal Hooks.
It returns values and functions to the component.
The component re-renders whenever the Hook's state changes.
Each component instance maintains its own independent Hook state.
🎯 Common Use Cases
Reuse form state, validation, and input handling across multiple forms.
Encapsulate data fetching and loading logic in a reusable Hook.
Share login, logout, and user session logic throughout an application.
Wrap browser APIs such as network status, window size, or geolocation in reusable Hooks.
⚠️ Rules for Custom Hooks
- Always start the Hook name with use.
- Call Hooks only at the top level of the custom Hook.
- Do not call Hooks inside loops, conditions, or nested functions.
- Use custom Hooks only inside React components or other custom Hooks.
Warning
✅ Best Practices
- Extract only reusable logic into custom Hooks.
- Keep each custom Hook focused on a single responsibility.
- Return only the values and functions that consumers need.
- Compose small custom Hooks together to build more powerful abstractions.
- Use clear, descriptive names such as useCounter, useFetch, or useOnlineStatus.
📚 Official Resource
Learn more about custom Hooks in the official React documentation at Reusing Logic with Custom Hooks.