Other hooks inside a custom hook
Key idea
A custom hook is a regular function that uses other hooks inside itself (
useState,useEffect,useMemo,useRef,useCallback, and even other custom hooks).
React does not distinguish between "built-in" hooks and your own: what matters is following the same rules of hooks.
Yes, you can - example
function useCounter(initial = 0) {
const [count, setCount] = useState(initial);
useEffect(() => {
console.log("Counter changed:", count);
}, [count]);
const inc = () => setCount((c) => c + 1);
const dec = () => setCount((c) => c - 1);
return { count, inc, dec };
}Here useCounter uses two built-in hooks at once:
useStateto store the state,useEffectto track changes.
And React treats this as completely normal.
You can use other custom hooks
function useUserData(userId) {
const data = useFetch(`/api/users/${userId}`);
const online = useOnlineStatus();
return { ...data, online };
}useUserData uses two other custom hooks
(useFetch and useOnlineStatus) - and this is fully correct.
This way, hooks can be combined, creating whole layers of reusable logic - like Lego "layers".
It is important to follow the rules of hooks
| Rule | Why it matters |
|---|---|
A hook's name must start with use | React identifies hooks by name |
| Call hooks only at the top level | So the call order is not broken |
| Hooks cannot be called inside conditions, loops, functions | React tracks their order by the call stack |
| Hooks can only be called inside function components or other hooks | Outside a React context they do not work |
Example of an error
function useExample(flag) {
if (flag) {
// Error! useState is called conditionally
const [count, setCount] = useState(0);
}
}React will throw an error:
Invalid hook call. Hooks can only be called inside the body of a function component.Correct:
function useExample(flag) {
const [count, setCount] = useState(0);
if (flag) {
// now the count value can be used
}
}Summary
| Question | Answer |
|---|---|
| Can other hooks be used inside a custom hook? | Yes, you can - and that is the main purpose of custom hooks |
| Which hooks can be used | Any: built-in (useState, useEffect, …) and even other custom ones |
| What are the limitations | Follow the rules of hooks: do not call them in conditions, only at the top level |
| Why this is needed | To reuse logic and build hooks on top of other hooks - like a construction set |
Main idea:
Custom hooks are a way to combine built-in hooks, creating reusable, clean, and predictable logic.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.