React interviews mix framework specifics — hooks, rendering, state — with JavaScript fundamentals that decide whether you actually understand what React is doing. Below are the most common questions with model answers. Middle: deeper understanding, optimization, and real-world situations.
Hooks must be called at the top level of a component or a custom hook, in the same order on every render. React stores hook state in an array indexed by call order, so a conditional hook shifts every subsequent index and one component starts reading another hook's state. That is why the linter rule exists — the failure mode is silent and extremely confusing.
useMemo caches a computed value, useCallback caches a function identity, and React.memo skips re-rendering a component when its props are shallowly equal. They work together: memoising a callback is pointless unless the child is wrapped in React.memo. All three cost memory and comparison time, so apply them to measured problems rather than by default.
A closure is a function bundled with the scope it was created in, so it keeps access to those variables after the outer function returns. In React it explains stale state: an effect or callback captures the value of state from the render in which it was created, so an interval set up once keeps reading the initial value. The fixes are a functional state update or adding the dependency to the effect.
The call stack runs synchronous code to completion, then the event loop drains the entire microtask queue — promise callbacks and queueMicrotask — before taking one macrotask such as a timer or an I/O callback. This is why a promise chain resolves before a setTimeout with zero delay. It also explains why an infinite loop of microtasks starves rendering while a chain of timers does not.
Keys let React match children across renders so it moves DOM nodes instead of recreating them, preserving state and focus. Using the array index breaks that when the list reorders or an item is inserted, because index 0 now refers to a different item — React reuses the wrong DOM node and component state ends up on the wrong row. A stable identifier from the data is the correct key.
A controlled input takes its value from React state and updates through onChange, so state is the single source of truth and validation or formatting is straightforward. An uncontrolled input keeps its value in the DOM and you read it through a ref when needed. Controlled is the default choice; uncontrolled suits file inputs, integrations with non-React code, and very large forms where per-keystroke rendering costs too much.
useEffect runs after the render is committed to the screen, and re-runs whenever a value in the dependency array changes. Returning a function from it registers cleanup, which React calls before the next run and on unmount — that is where you cancel subscriptions, timers, and in-flight requests. Omitting cleanup is the usual cause of memory leaks and state updates on unmounted components.
Prop drilling is passing data through components that do not use it, purely to reach a deep descendant. Context solves it for values that are genuinely global to a subtree such as theme, locale, or the current user. For frequently changing data, a state library or component composition — passing elements as children — is usually better, since context re-renders every consumer on change.
In a real interview you speak under pressure. Cam asks these same questions, scores every answer, and shows exactly what to fix.
Practice a Middle React Frontend interview →