How Do You Design a Good Custom React Hook?
Learn how to design custom React hooks with minimal APIs, proper cleanup, and composable, single-purpose logic.
Expected Interview Answer
A well-designed custom hook extracts reusable stateful logic — not UI — behind a function starting with “use”, returning a small, purposeful API (values and functions) so multiple components can share behavior like data fetching or subscriptions without duplicating logic or coupling to a specific render output.
The core idea is separation of concerns: a component decides what to render, while a custom hook decides how a piece of behavior works internally, such as managing a WebSocket connection, debouncing a value, or tracking window size. Good hooks follow the Rules of Hooks (only called at the top level of a function component or another hook), name their return values clearly (an array like `[value, setValue]` for tightly coupled state, or an object for many named fields), and keep their public surface minimal so consumers are not exposed to internal implementation details like raw refs or timers. They also handle their own cleanup, returning a cleanup function from any `useEffect` inside them so subscriptions or listeners do not leak when the consuming component unmounts. A hook composed from other hooks (useState, useEffect, useRef, or even other custom hooks) is the norm — hooks are meant to compose, and a hook that grows a giant blob of unrelated responsibilities is a sign it should be split into two smaller ones.
- Removes duplicated stateful logic across otherwise unrelated components
- Keeps components focused on rendering, not managing subscriptions/timers directly
- Encapsulated cleanup prevents memory leaks and stale listeners
- Composable — hooks can call other hooks to build up more complex behavior
AI Mentor Explanation
A custom hook is like a team`s fielding coach who has one specific, reusable drill — say, catching under lights — that any fielder can plug into their own practice session without needing to understand the drill`s internal setup. The coach hands back exactly what the fielder needs afterward: a score and a tip, not the entire drill apparatus. If the coach also tried to run batting practice and fitness testing in the same session, it would become a tangled mess better split into separate specialist coaches. That single-responsibility, clean-handback design is exactly what makes a custom hook reusable across many components.
Step-by-Step Explanation
Step 1
Identify the reusable stateful logic
Spot logic duplicated across components — fetching, subscriptions, timers, form state.
Step 2
Extract into a use-prefixed function
Move the useState/useEffect/useRef calls into a function named useSomething, following the Rules of Hooks.
Step 3
Design a minimal return API
Return only what consumers need — an array for tightly coupled pairs, an object for many named fields.
Step 4
Handle cleanup internally
Return cleanup functions from any effects inside the hook so subscriptions and timers do not leak.
What Interviewer Expects
- Clear articulation that hooks extract behavior, not UI
- Knowledge of the Rules of Hooks (top-level calls only)
- Ability to describe a minimal, well-named return API
- Awareness of cleanup and composability across multiple hooks
Common Mistakes
- Calling hooks conditionally or inside loops, violating the Rules of Hooks
- Returning too many internal implementation details instead of a clean API
- Forgetting to clean up subscriptions/timers inside the hook`s effects
- Cramming multiple unrelated responsibilities into a single oversized hook
Best Answer (HR Friendly)
“A custom hook is a way to pull out logic that several components need — like tracking window size or managing a timer — into one reusable function, so you write it once and any component can use it. The trick to designing a good one is keeping what it returns small and clear, and making sure it cleans up after itself so nothing keeps running after the component using it goes away.”
Code Example
import { useState, useEffect } from 'react'
function useDebouncedValue(value, delayMs) {
const [debounced, setDebounced] = useState(value)
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delayMs)
return () => clearTimeout(timer) // cleanup on change/unmount
}, [value, delayMs])
return debounced
}
// Usage: const debouncedQuery = useDebouncedValue(query, 300)Follow-up Questions
- What are the Rules of Hooks and why do they matter for custom hooks?
- When would you return an array versus an object from a custom hook?
- How would you test a custom hook in isolation?
- How do custom hooks differ from higher-order components for sharing logic?
MCQ Practice
1. What is the primary purpose of a custom React hook?
Custom hooks pull reusable stateful behavior out of components into a shared, composable function.
2. What must every custom hook function name start with?
The "use" prefix is required so React`s linter and runtime can enforce the Rules of Hooks.
3. Why should a custom hook return a cleanup function from its internal effects?
Cleanup functions cancel subscriptions/timers when the consuming component unmounts or deps change.
Flash Cards
What must a custom hook`s name start with? — "use", e.g. useDebouncedValue.
What should a custom hook return? — A minimal, well-named API — only what consumers actually need.
Where can hooks be called? — Only at the top level of a function component or another hook — never conditionally or in loops.
Why do hooks need internal cleanup? — To cancel subscriptions/timers when the component unmounts, avoiding leaks.