Question 1

Why does React require hooks to be called in the same order every time?

Accepted Answer

React does not identify hooks by variable names; instead, it uses an internal "slot" system based on the call order. The first hook called is assigned to Slot 0, the second to Slot 1, and so on. If a hook is placed inside a conditional statement or a loop and is skipped, the entire sequence shifts, causing subsequent hooks to map to the wrong slots and leading to a collapse of the component's state logic.

Question 2

What is the difference between treating useEffect as a lifecycle method versus a synchronization tool?

Accepted Answer

Treating `useEffect` as a lifecycle method (like `componentDidMount`) is a common mistake that ignores how React actually functions. The correct mental model is synchronization: the render function should be a pure calculation of JSX, while `useEffect` acts as an "escape hatch" to synchronize that UI with external systems like APIs or WebSockets. It ensures that after the browser has painted the screen, the outside world is updated to match the current state of the component.

Question 3

When should a developer choose useMemo or useCallback for performance optimization?

Accepted Answer

These hooks should only be used after profiling an app to confirm a specific bottleneck, as memoization carries its own overhead in terms of memory and dependency comparison. `useMemo` is best for expensive calculations, such as filtering thousands of items. `useCallback` is specifically used for "referential stability," ensuring a function identity stays the same across renders so that child components wrapped in `React.memo` do not re-render unnecessarily.

Question 4

How does the "Problem-Mechanism-Gotcha-Usage" framework help in technical interviews?

Accepted Answer

This sixty-second communication strategy prevents rambling and demonstrates senior-level reasoning. A candidate spends ten seconds on the problem the hook solves, twenty seconds on the underlying mechanism, ten seconds on a common mistake (like a stale closure or missing cleanup), and twenty seconds on a practical, real-world use case. This structure signals to interviewers that the developer understands the "why" behind the code, not just the syntax.

Question 5

What is the distinction between Client State and Server State in modern React architecture?

Accepted Answer

Client state refers to local UI concerns, such as whether a modal is open or which theme is active, and is typically managed with `useState` or lightweight stores like Zustand. Server state is "borrowed" data fetched from an API that the client does not own. Modern architecture favors using dedicated server-state libraries like TanStack Query to handle the complexities of caching and revalidation, rather than manually managing these snapshots with `useEffect`.

React interview questions and the mental model gap

How This Personalized Podcast Was Made

More like this