React Hooks Interview Questions 2026, 30+ Deep Q&A with Code

Hooks are the spine of every modern React codebase, and candidates report that 60 to 70 percent of a React technical round is spent on them. Knowing the API is not enough in 2026. Interviewers at Flipkart, Swiggy, Razorpay, CRED, and funded startups probe the render model, the closure trap, the dependency array, and the new React 19 hooks. This guide compiles 30+ questions from candidate-reported interview rounds and public preparation resources, each with runnable code and the exact trade-off the interviewer is fishing for.

Why hooks dominate: React 19 made function components the default and Server Components the baseline. The class lifecycle is effectively dead in interviews. Master hooks and you cover the bulk of the round.

Related: React Interview Questions 2026 | React Redux Interview Questions 2026 | React Coding Questions with Solutions 2026 | JavaScript Interview Questions 2026

---

Beginner Hooks Questions (Q1 to Q10)

Candidates report these open almost every React phone screen. Get them crisp and the interviewer fast-tracks to the harder material.

Q1. What are React Hooks and why were they introduced?

Problem before hooks	How hooks solve it
Reusing stateful logic needed HOCs or render props (wrapper hell)	Custom hooks share logic as plain functions
Complex components split related code across lifecycle methods	useEffect groups related setup and teardown together
Classes confused humans and machines (this binding, minification)	Function components have no this

The rules: only call hooks at the top level (never inside loops, conditions, or nested functions) and only call them from React functions.

Q2. Explain useState and what its setter actually does.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  setCount(count + 1); // still +1 total, count is stale here
}

Both calls read the same count from the render closure, so the result is +1, not +2. The fix is the functional updater:

setCount(c => c + 1);
setCount(c => c + 1); // now +2

Candidate-reported as a near-universal opening question.

Q3. What is lazy initialization in useState?

// BAD: parseHeavy() runs on every render, result ignored after first
const [data, setData] = useState(parseHeavy(props.raw));

// GOOD: runs once
const [data, setData] = useState(() => parseHeavy(props.raw));

Q4. What does useEffect do and when does it run?

Dependency array	Runs
omitted	After every render
[]	Once after mount (and cleanup on unmount)
[a, b]	After mount and whenever a or b changes

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // cleanup
}, []);

Q5. What is the cleanup function and why does it matter?

Q6. Why does useEffect run twice in development?

Q7. What is useRef and how is it different from useState?

	useState	useRef
Triggers re-render	Yes	No
Holds	UI state	DOM nodes, mutable values, previous values
Read timing	Snapshot per render	Always latest

const inputRef = useRef(null);
const focus = () => inputRef.current.focus();
return <input ref={inputRef} />;

Q8. How do you store the previous value of a prop or state?

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => { ref.current = value; });
  return ref.current;
}

Q9. What is useContext and what problem does it solve?

const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);

Q10. What are the Rules of Hooks and why do they exist?

---

Intermediate Hooks Questions (Q11 to Q22)

Candidate-reported as the deciding section for mid-level frontend roles. This is where dependency arrays and closures separate offers from rejections.

Q11. Explain the stale closure problem in useEffect.

useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // always logs 0 if deps are []
  }, 1000);
  return () => clearInterval(id);
}, []); // missing count

Fixes: add count to deps, or use the functional updater so you never read count directly.

Q12. When do you use useMemo vs useCallback?

• useMemo(fn, deps) caches the return value of an expensive computation.
• useCallback(fn, deps) caches the function reference itself (equivalent to useMemo(() => fn, deps)).

const sorted = useMemo(() => bigList.sort(cmp), [bigList]);
const onSelect = useCallback((id) => dispatch(select(id)), [dispatch]);

Use useCallback mainly to keep a stable reference for a memo-wrapped child or an effect dependency. Premature memoization adds overhead, so measure first.

Q13. Does React 19 still need useMemo and useCallback?

Q14. What is useReducer and when do you prefer it over useState?

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'reset':     return { count: 0 };
    default:          throw new Error('unknown action');
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

It also makes testing trivial because the reducer is a pure function.

Q15. How do you fetch data with hooks correctly, including cancellation?

useEffect(() => {
  const ctrl = new AbortController();
  setLoading(true);
  fetch(`/api/user/${id}`, { signal: ctrl.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => { if (e.name !== 'AbortError') setError(e); })
    .finally(() => setLoading(false));
  return () => ctrl.abort();
}, [id]);

In 2026, candidates report the preferred answer mentions React Query or the React 19 use hook with Suspense over hand-rolled effects.

Q16. What is the useLayoutEffect hook and when is it required?

Q17. Why does an object or array in a dependency array cause infinite loops?

Q18. How do you debounce an input with hooks?

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

The cleanup clears the prior timer, so only the last keystroke after the quiet window survives.

Q19. What is useImperativeHandle and when is it justified?

const Input = forwardRef((props, ref) => {
  const inner = useRef();
  useImperativeHandle(ref, () => ({ focus: () => inner.current.focus() }));
  return <input ref={inner} />;
});

Q20. How do you build a custom hook? Give a real example.

function useWindowSize() {
  const [size, setSize] = useState({ w: window.innerWidth, h: window.innerHeight });
  useEffect(() => {
    const onResize = () => setSize({ w: window.innerWidth, h: window.innerHeight });
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return size;
}

Q21. What is the useSyncExternalStore hook for?

Q22. How do you avoid unnecessary re-renders caused by context?

---

Advanced and React 19 Hooks (Q23 to Q32)

Candidate-reported as the senior differentiator. The React 19 hooks are new and interviewers use them to find who reads release notes.

Q23. What does the new use hook do?

function Profile({ userPromise }) {
  const user = use(userPromise); // suspends until resolved
  return <h1>{user.name}</h1>;
}

Q24. Explain useActionState (React 19).

const [error, submitAction, isPending] = useActionState(
  async (prev, formData) => {
    const res = await updateName(formData.get('name'));
    return res.error ?? null;
  },
  null
);

Q25. What is useOptimistic and why is it useful?

const [optimisticMsgs, addOptimistic] = useOptimistic(messages, (state, m) => [...state, m]);

Q26. What is useFormStatus?

Q27. What is useDeferredValue and how does it differ from useTransition?

• useDeferredValue(value) lets you defer re-rendering a non-urgent part using a lagging copy of a value.
• useTransition() marks state updates as non-urgent so React can interrupt them for urgent updates like typing.

const [isPending, startTransition] = useTransition();
startTransition(() => setQuery(input)); // typing stays smooth

Q28. How does useId work and why not use Math.random?

Q29. Scenario: a search box re-fetches on every keystroke and the UI janks. How do you fix it with hooks?

Q30. Scenario: a child re-renders even though its props look unchanged. Walk through your diagnosis.

1. Confirm the child is wrapped in React.memo.
2. Inspect props for inline objects, arrays, or functions, each is a new reference per render.
3. Stabilize callbacks with useCallback and objects with useMemo.
4. Verify the comparison; memo does a shallow compare, so nested object changes still slip through.
5. Use the React DevTools Profiler "why did this render" to confirm.

Q31. How do hooks behave with Server Components?

Q32. What happens if you call a hook conditionally? Show the failure.

// BROKEN
if (loggedIn) {
  const [name, setName] = useState(''); // index shifts when loggedIn flips
}

React throws "Rendered fewer hooks than expected" or silently misassigns state. Always call unconditionally and branch inside.

---

React Hooks Mock Test, 2026 Edition

5 original questions calibrated to the 2026 React batch difficulty by Aditya Sharma, drawn from candidate-reported round patterns.

Question 1

What does setCount(count + 1) called twice in one handler produce, starting from 0?

a) 2 b) 1 c) Error d) Undefined

Solution: Both reads see the same stale count from the render closure, so net change is +1. Use setCount(c => c + 1) for +2. Answer: (b)

Question 2

Which hook does NOT trigger a re-render when its value changes?

a) useState b) useReducer c) useRef d) useContext

Solution: useRef mutations are silent; .current updates do not schedule a render. Answer: (c)

Question 3

Why does useEffect run twice in React 18 dev mode?

a) A bug b) Strict Mode mount-unmount-remount to surface missing cleanup c) Hot reload d) Concurrent rendering retries

Solution: Strict Mode intentionally double-invokes effects in development only. Answer: (b)

Question 4

Which React 19 hook can be called conditionally?

a) useState b) useEffect c) use d) useMemo

Solution: use is the exception; it may be called in conditions and loops. Answer: (c)

Question 5

An effect with an inline object dependency loops forever. The root cause is:

a) React bug b) The object is a new reference each render c) Missing key prop d) Wrong import

Solution: Reference inequality re-fires the effect every render. Memoize or depend on primitives. Answer: (b)

---

FAQ, Your React Hooks Interview Questions

Q: How many hooks questions should I expect? Candidates report 8 to 15 hook-specific questions across a React loop, heaviest in the technical round. Depth scales with seniority.

Q: Should I learn the React 19 hooks for a 2026 interview? Yes. use, useActionState, useOptimistic, and useFormStatus are increasingly probed. Confirm the exact stack the company runs, but knowing them signals you track releases.

Q: Is useMemo overuse a red flag? Yes. Interviewers reward "measure first, memoize the proven bottleneck" over blanket memoization. With the React Compiler, manual memoization is shrinking further.

Q: What single mistake fails the most candidates? Stale closures and wrong dependency arrays, per candidate-reported feedback. Practice explaining the closure model out loud.

---

You May Also Like

• React Interview Questions 2026
• React Redux Interview Questions 2026
• React Output Questions 2026
• React Coding Questions with Solutions 2026

For the full picture, confirm version-specific behavior on the official React documentation page before your interview, since the React 19 hook surface is still evolving.