What is a custom hook? Give a real example.
Quick answer
A function starting with 'use' that calls other hooks to extract and reuse stateful logic. Each call gets its own independent state.
In detail
Custom hooks let you share logic (not state) between components without HOCs or render props. They follow the Rules of Hooks because of the 'use' prefix. Common examples: useToggle, useDebounce, useLocalStorage, useFetch. They make components read clearly and keep effects with cleanup encapsulated.
1function useDebounce(value, delay = 300) {
2 const [debounced, setDebounced] = useState(value);
3 useEffect(() => {
4 const id = setTimeout(() => setDebounced(value), delay);
5 return () => clearTimeout(id);
6 }, [value, delay]);
7 return debounced;
8}
9const q = useDebounce(query, 400);Why interviewers ask this: Tests reusable-logic skills central to real React work.
Common follow-up questions
- →Do two components using the same custom hook share state?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399