Advanced React Hooks Interview Questions With Answers

Advanced React Hooks Interview Questions With Answers

Beyond basic hooks, interviewers ask advanced hook questions to test depth. Here are the common ones with answers.

Why must hooks be called at the top level?

Because React tracks hooks by call order. Calling a hook inside a loop or condition changes the order between renders, breaking React's internal tracking and causing state to be assigned to the wrong hook.

What is the difference between useMemo and useCallback?

useMemo memoizes a value; useCallback memoizes a function reference. Use useMemo for expensive computations and useCallback for stable function references passed to memoized children.

What is the difference between useState and useReducer?

useState is for simple independent state. useReducer is for complex state with transitions, modeling state as a reducer that takes an action. Choose based on complexity.

What is useRef used for besides DOM access?

For mutable values that should persist across renders without triggering re-renders, like timer ids, previous values, and mounted flags. Mutating current does not trigger a re-render.

How would you avoid stale closures in useEffect?

Include the relevant values in the dependency array so the effect re-runs with the latest values. The hooks lint plugin helps get this right, and you can also use refs for values that should not trigger re-runs.

When do useMemo and useCallback hurt performance?

When used for cheap computations, without a memoized child, or as a default across the codebase. Memoization itself has overhead, so use it only where a real bottleneck is measured.

The Takeaway

Advanced hook questions test depth: why hooks are top-level, useMemo vs useCallback, useState vs useReducer, useRef beyond the DOM, stale closures, and when memoization hurts. Connect each to the problem it solves to answer well.