React · Frontend system thinking
What is a custom hook and when should you create one?
Short answer
A custom hook is a function whose name starts with use and that calls other hooks. It extracts reusable stateful logic, but each call gets its own independent state.
A custom hook is not a new React feature. It is a convention for moving hook logic into a function that can be reused across components. The function shares behaviour, not state: two components calling useOnlineStatus() each get their own state and effects.
function useOnlineStatus() {
const [online, setOnline] = useState(navigator.onLine);
useEffect(() => {
const goOnline = () => setOnline(true);
const goOffline = () => setOnline(false);
window.addEventListener("online", goOnline);
window.addEventListener("offline", goOffline);
return () => {
window.removeEventListener("online", goOnline);
window.removeEventListener("offline", goOffline);
};
}, []);
return online;
}What a custom hook can return
- A single value, such as a boolean or a fetched record
- A tuple, such as
[value, setValue], when callers need control - An object with named fields and actions
- A ref or a derived value, as long as the return shape is clear
Create one when the same stateful behaviour appears in several components, when a component's hook logic is hard to test in isolation, or when a component has become a mix of unrelated concerns. Do not create a hook just to wrap a single useState call with no additional meaning.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Do two components calling the same custom hook share state?
- 2How do you test a custom hook?
- 3When is a custom hook the wrong abstraction?
- 4What makes a function a hook rather than a normal helper?
Say it in the interview
A custom hook is a function that starts with use and calls other hooks. I use it to extract stateful behaviour, such as subscriptions, form state or data fetching, so components can focus on rendering. It reuses logic, not state: every call gets its own state and effects. I only introduce one when there is a real shared concern, and I keep its return value small and predictable.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.