Interviewers want to see that you can choose Hooks intentionally: state, effects, refs, memoization, context, reducers, and concurrent features. Explain what each Hook is for, when you reach for it, and the trade-offs.
Which React Hooks have you used, and when would you choose each?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
The Core Idea
A strong answer shows you pick Hooks based on the job: local state, side effects, stable references, global state, or performance. Group Hooks by purpose and give one concrete example for each.
Hook | When I use it | Example |
|---|---|---|
useState | Local UI state | Form inputs, toggles, tabs |
useEffect | Sync with external systems after render | Fetch data, subscriptions, timers |
useRef | Hold mutable values or DOM refs without re-rendering | Focus an input, store interval id |
useMemo / useCallback | Avoid expensive recomputation or unstable handlers | Memoize filtered lists or event callbacks |
useContext | Read global values shared across the tree | Theme, locale, auth user |
useReducer | Complex state transitions | Multi-step forms, undo/redo |
useLayoutEffect | Read or write layout before paint | Measure DOM, prevent flicker |
useTransition / useDeferredValue | Keep UI responsive during heavy updates | Search filtering on large lists |
useId | Stable ids for accessibility | label/input linking |
Custom hooks
Mention any custom hooks you have built (for data fetching, form logic, analytics, etc.). This shows you can extract reusable stateful logic and keep components clean.
Rules of Hooks (must mention)
- Call hooks at the top level (no loops or conditionals).
- Only call hooks from components or other hooks.
These rules exist because React matches hook state by call order.
Pick hooks based on intent: state, side effects, refs, memoization, or shared state. Explain trade-offs, and show you know the rules and when to use custom hooks.