What are Custom Hooks in React?
Learn what React custom Hooks are, how they reuse stateful logic, the 'use' naming rule, and a useFetch example with common interview questions and answers.
Expected Interview Answer
A custom Hook is a JavaScript function whose name starts with 'use' and that calls other Hooks to package reusable stateful logic so multiple components can share it.
Custom Hooks let you extract logic that uses useState, useEffect, useContext or other Hooks out of a component and into a standalone function. Each component that calls the custom Hook gets its own isolated state — the Hook shares the logic, not the state itself. They follow the same Rules of Hooks as built-in Hooks and are the idiomatic replacement for older patterns like higher-order components and render props.
- Reuses stateful logic without duplicating code
- Keeps components small and focused on rendering
- Each call gets its own independent state
- Composes cleanly by calling other Hooks
- Easier to unit test logic in isolation
AI Mentor Explanation
A custom Hook is like a reusable net-practice drill a coach writes down once — say a throw-down routine for facing spin. Every batter runs the exact same drill, yet each keeps their own scores and improvements. The drill (logic) is shared, but the personal progress (state) stays separate for each player who uses it.
Step-by-Step Explanation
Step 1
Spot repeated logic
Find stateful logic (useState + useEffect) duplicated across two or more components.
Step 2
Create a use-prefixed function
Write a plain function named useSomething so React and linters treat it as a Hook.
Step 3
Move the Hooks inside
Call useState, useEffect and other Hooks within the function to hold and manage the logic.
Step 4
Return a stable API
Return values, objects or functions the component needs, such as { data, loading, error }.
Step 5
Call it in components
Invoke the custom Hook at the top level of any component; each call gets isolated state.
What Interviewer Expects
- Naming convention: must start with 'use'
- Understanding that logic is shared but state is not
- Knowledge of the Rules of Hooks applying to custom Hooks
- A concrete example like useFetch or useLocalStorage
- How custom Hooks replaced HOCs and render props
Common Mistakes
- Thinking custom Hooks share state between components
- Forgetting the 'use' prefix so lint rules do not apply
- Calling the custom Hook conditionally or inside loops
- Putting logic that has no Hooks inside a 'use' function unnecessarily
- Returning an unstable object that causes extra re-renders
Best Answer (HR Friendly)
“A custom Hook is a reusable function that packages up common React logic so several parts of an app can use it without copying and pasting code. Each place that uses it still keeps its own separate data, which keeps the app clean and consistent.”
Code Example
import { useState, useEffect } from 'react'
function useFetch(url) {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
let active = true
setLoading(true)
fetch(url)
.then((res) => res.json())
.then((json) => { if (active) setData(json) })
.catch((err) => { if (active) setError(err) })
.finally(() => { if (active) setLoading(false) })
return () => { active = false }
}, [url])
return { data, loading, error }
}
function Profile({ id }) {
const { data, loading, error } = useFetch(`/api/users/${id}`)
if (loading) return <p>Loading...</p>
if (error) return <p>Something went wrong</p>
return <h1>{data.name}</h1>
}Follow-up Questions
- How is a custom Hook different from a higher-order component?
- Why must a custom Hook name start with 'use'?
- Do two components calling the same custom Hook share state?
- How would you test a custom Hook in isolation?
- When should logic NOT be a custom Hook?
MCQ Practice
1. What must every custom Hook's name begin with?
The 'use' prefix lets React and the ESLint plugin recognize the function as a Hook and enforce the Rules of Hooks.
2. When two components call the same custom Hook, they share the same state.
Custom Hooks share logic, not state. Every call to the Hook creates its own independent state.
3. Which pattern do custom Hooks most directly replace?
Custom Hooks are the modern, composable way to reuse stateful logic that previously required HOCs or render props.
Flash Cards
What defines a custom Hook? — A function starting with 'use' that calls other Hooks to reuse stateful logic.
Do custom Hooks share state? — No — they share logic; each call gets its own isolated state.
Do the Rules of Hooks apply to custom Hooks? — Yes — call them only at the top level, never conditionally or in loops.
What did custom Hooks replace? — Higher-order components and render props for sharing stateful logic.