Welcome back to the “Let’s Master React Hooks Together” series.
So far in this series, we’ve explored several important React Hooks and understood how they help manage state, side effects, performance optimization, references, and more inside React applications.
Now we’ve reached one of the most practical and powerful topics in React development — Custom Hooks.
This is the point where React applications start becoming cleaner, smarter, and more reusable.
As applications grow, developers often notice the same logic repeating in multiple components:
- Fetching API data
- Managing forms
- Handling authentication
- Tracking screen size
- Working with local storage
- Managing counters and timers
Instead of rewriting the same logic again and again, React allows us to extract that logic into reusable functions called Custom Hooks.
In this episode, we’ll deeply understand:
- What Custom Hooks are
- The official React definition
- Why they are important
- When to use them
- How to create them
- Real-world examples
- Best practices
- Common mistakes to avoid
Let’s get started.
Custom Hooks in React: Reusing Logic the Smart Way
When building React applications, one thing becomes obvious very quickly: the same logic appears again and again.
You fetch data in multiple components.
You track window size in several places.
You handle form inputs repeatedly.
You manage loading states everywhere.
At first, copying and pasting feels fast. But after a while, your code becomes difficult to maintain.
That’s exactly where Custom Hooks become useful.
Custom Hooks are one of the most powerful patterns in React because they allow you to extract reusable logic into a clean and reusable function.
In this article, we’ll understand:
- What Custom Hooks are
- The official React definition
- Why they exist
- When to use them
- How to create them
- Where they are useful in real projects
- Best practices and common mistakes
- Real-world examples
What Is a Custom Hook?
According to the official React documentation:
“A custom Hook is a JavaScript function whose name starts with
useand that may call other Hooks.”
At first glance, this definition feels simple. But there’s more behind it.
A Custom Hook is basically:
- A reusable function
- That contains React logic
- And can internally use hooks like
useState,useEffect,useContext, etc.
Instead of duplicating logic across components, you move that logic into a reusable hook.
Why Custom Hooks Exist
To understand why Custom Hooks matter, let’s first look at a common problem.
Imagine you have multiple components fetching data from an API.
import { useState, useEffect } from "react";
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
{users.map((user) => (
<p key={user.id}>{user.name}</p>
))}
</div>
);
}
Now another component needs similar fetching logic.
import { useState, useEffect } from "react";
function Posts() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then((data) => setPosts(data));
}, []);
return (
<div>
{posts.map((post) => (
<p key={post.id}>{post.title}</p>
))}
</div>
);
}
Notice something?
The fetching logic is almost identical.
This creates problems:
- Duplicate code
- Harder maintenance
- Repeated bug fixes
- Larger components
- Poor readability
Custom Hooks solve this by extracting reusable behavior.
Understanding the Real Purpose of Custom Hooks
A lot of developers think Custom Hooks are only for reducing code duplication.
That’s true — but not the full picture.
The real purpose is:
1. Reusability
Write logic once and use it anywhere.
2. Separation of Concerns
Your component focuses on UI while the hook handles logic.
3. Cleaner Components
Components become smaller and easier to read.
4. Better Maintainability
Updating logic in one place updates it everywhere.
5. Easier Testing
You can test business logic separately from UI.
The Rules of Custom Hooks
Custom Hooks follow the same rules as React Hooks.
Rule 1: The function name must start with use
Correct:
useFetchData()
Wrong:
fetchData()
React relies on this naming convention internally.
Rule 2: Hooks must be called at the top level
Do not call hooks inside:
- loops
- conditions
- nested functions
Wrong:
if (show) {
useEffect(() => {});
}
Correct:
useEffect(() => {
if (show) {
// logic here
}
}, [show]);
How to Create a Custom Hook
The structure is very simple.
function useSomething() {
// hook logic
return something;
}
That’s it.
Now let’s build a real example.
Example 1: Creating a useFetch Hook
Step 1: Create the Hook
import { useEffect, useState } from "react";
function useFetch(url) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
setLoading(true);
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to fetch data");
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
export default useFetch;
Step 2: Use the Hook
import useFetch from "./useFetch";
function Users() {
const { data, loading, error } = useFetch(
"https://jsonplaceholder.typicode.com/users"
);
if (loading) return <p>Loading...</p>;
if (error) return <p>{error}</p>;
return (
<div>
{data.map((user) => (
<p key={user.id}>{user.name}</p>
))}
</div>
);
}
Now the component is much cleaner.
The fetching logic lives in one reusable place.
Example 2: Creating a useCounter Hook
One of the simplest and most common examples of a Custom Hook is a counter.
Instead of managing counter logic separately in every component, we can create a reusable hook.
Step 1: Create the Hook
import { useState } from "react";
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = () => {
setCount((prev) => prev + 1);
};
const decrement = () => {
setCount((prev) => prev - 1);
};
const reset = () => {
setCount(initialValue);
};
return {
count,
increment,
decrement,
reset,
};
}
export default useCounter;
Step 2: Use the Hook
import useCounter from "./useCounter";
function Counter() {
const {
count,
increment,
decrement,
reset,
} = useCounter(10);
return (
<div>
<h2>{count}</h2>
<button onClick={increment}>
Increment
</button>
<button onClick={decrement}>
Decrement
</button>
<button onClick={reset}>
Reset
</button>
</div>
);
}
Now the counter logic is reusable across multiple components.
You can use the same hook anywhere in your application without rewriting the logic again.
When Should You Create a Custom Hook?
Not every repeated line of code needs a Custom Hook.
A good Custom Hook usually appears when:
You repeat logic across multiple components
Example:
- API fetching
- Authentication
- Form handling
- Pagination
- Debouncing
- Local storage access
Your component becomes too large
If a component contains too much logic, extracting it into hooks improves readability.
Logic is unrelated to UI
UI belongs inside components.
Reusable behavior belongs inside hooks.
Where Custom Hooks Are Commonly Used
Custom Hooks are everywhere in modern React applications.
1. API Requests
useFetch()
useUsers()
useProducts()
2. Authentication
useAuth()
3. Theme Handling
useTheme()
4. Form Management
useForm()
5. Window Resize Detection
useWindowSize()
6. Dark Mode
useDarkMode()
7. Local Storage
useLocalStorage()
Example 3: useLocalStorage Hook
Saving values in local storage is common.
Instead of rewriting the logic everywhere, create a reusable hook.
import { useState } from "react";
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const storedValue = localStorage.getItem(key);
return storedValue
? JSON.parse(storedValue)
: initialValue;
});
const saveValue = (newValue) => {
setValue(newValue);
localStorage.setItem(
key,
JSON.stringify(newValue)
);
};
return [value, saveValue];
}
export default useLocalStorage;
Usage:
function App() {
const [name, setName] = useLocalStorage(
"username",
""
);
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
How Custom Hooks Improve Project Structure
Without hooks, components often become messy.
Example of a bad structure:
components/
├── Users.jsx
├── Products.jsx
├── Dashboard.jsx
Each component contains repeated logic.
With hooks:
src/
├── components/
├── hooks/
│ ├── useFetch.js
│ ├── useAuth.js
│ ├── useLocalStorage.js
Now logic is centralized and reusable.
Important Difference: Component vs Custom Hook
A lot of developers confuse them.
React Component
- Returns JSX
- Handles UI rendering
function Button() {
return <button>Click</button>;
}
Custom Hook
- Returns logic/data/functions
- Does NOT return JSX
function useCounter() {
return { count, increment };
}
Common Mistakes with Custom Hooks
1. Returning JSX from Hooks
Wrong:
function useModal() {
return <div>Modal</div>;
}
Hooks should return:
- state
- functions
- values
- logic
Not UI.
2. Creating Hooks Too Early
Not every logic deserves a hook.
If logic is used only once, keep it inside the component.
3. Massive Hooks
Avoid creating giant hooks that do everything.
Bad:
useDashboardEverything()
Keep hooks focused.
4. Ignoring Dependency Arrays
Hooks using useEffect still require proper dependencies.
Wrong dependencies can create bugs.
Advanced Pattern: Hooks Calling Hooks
One powerful feature is that hooks can use other hooks.
Example:
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
// auth logic
}, []);
return user;
}
Another hook can reuse it:
function useAdmin() {
const user = useAuth();
return user?.role === "admin";
}
This creates highly modular logic.
Real-World Example
Imagine an e-commerce application.
Without hooks:
- Every page handles fetching
- Every component manages loading
- Authentication logic repeats
- Cart logic duplicates
With hooks:
useProducts()
useCart()
useAuth()
useOrders()
useWishlist()
Everything becomes organized and reusable.
Are Custom Hooks Required?
No.
React applications can work without them.
But as projects grow, Custom Hooks become one of the best ways to keep code maintainable and scalable.
Most modern React applications use them heavily.
Best Practices for Writing Custom Hooks
Keep One Responsibility
Good:
useFetch()
Bad:
useFetchAndThemeAndAuth()
Use Clear Names
Hook names should describe behavior.
Good:
useWindowSize()
useDarkMode()
Return Useful Data
Hooks should expose only what components need.
Handle Errors Properly
Especially in API hooks.
Avoid Unnecessary Re-renders
Use optimization carefully when needed.
Final Thoughts
Custom Hooks are one of React’s cleanest and most practical features.
They help you:
- Reuse logic
- Reduce duplication
- Keep components clean
- Improve maintainability
- Build scalable applications
The best way to understand Custom Hooks is to start noticing repeated logic in your own components.
Whenever you find yourself copying the same state management or effect logic multiple times, that’s usually a sign that a Custom Hook could help.
And once you start using them properly, your React code becomes significantly cleaner, easier to manage, and far more reusable.
Conclusion
That’s it for Episode 9 of the “Let’s Master React Hooks Together” series.
In this episode, we explored one of the most practical concepts in React — Custom Hooks — and understood how they help create reusable, clean, and maintainable applications.
We learned:
- What Custom Hooks are
- Why React introduced them
- How to create them
- When to use them
- Real-world use cases
- Best practices and mistakes to avoid
More importantly, we saw how Custom Hooks help separate logic from UI, making React applications much easier to scale and maintain.
As you continue building React projects, you’ll start noticing repeated patterns everywhere. That’s the perfect opportunity to create your own hooks and make your codebase cleaner and smarter.
In the next episode, we’ll continue exploring more advanced React concepts and patterns to strengthen your React development skills step by step.
See you in the next episode of
“Let’s Master React Hooks Together.”
Top comments (0)