React Debugging Interview Questions
Frontend rounds have moved past building a component from scratch. Increasingly you are handed an existing app, or a colleague's pull request, and asked what is wrong with it — a poll that never stops, a list that loses a half-typed edit, results that do not match the search box. These bugs are obvious once you have seen them and invisible until you have. Each exercise below is a real patch: decide whether you would merge it, say why, then see exactly what breaks.
No setup and no account needed — they run in the browser.
What React debugging interviews test
Almost every hard React bug comes from the same small set of misunderstandings: that a closure captures the render it was created in, that an effect which acquires something must release it, that async results can arrive in an order you did not ask for, and that React decides what to re-render by comparing references. An interviewer probing these is not testing API recall — they are checking whether you can reason about when your code runs and what it captured when it did.
The review format mirrors the job. On a real team you spend more time reading diffs than writing them, and the patch that looks reasonable but is subtly wrong is the one that reaches production. One of the exercises below is, in fact, correct — telling it apart from the others is the whole skill.
Practice these patches
Stale closure in a polling effect
An interval reads state from the render that created it, so the stop condition never fires and the page polls forever.
Would you approve it? →Out-of-order search responses
Two requests are in flight, the slower one lands last, and the results no longer match the query in the box.
Would you approve it? →Index as key in an editable list
Deleting a row shifts every index, React reuses the DOM, and a half-typed edit lands against the wrong task.
Would you approve it? →Mutating state instead of replacing it
The array is pushed into and handed back by the same reference, so React bails out and nothing re-renders.
Would you approve it? →A subscription with no cleanup
Every symbol change opens another socket and none are closed, so prices flicker between feeds and leak past unmount.
Would you approve it? →Debounced search with cancellation
A correct one — timer and request both cancelled in the cleanup. Can you tell it apart from the broken patches?
Would you approve it? →Patterns these exercises cover
Stale closures
Why a callback created in one render keeps that render’s state, and how the updater form and dependency arrays fix it.
Effect cleanup
Releasing what an effect acquires — intervals, sockets, subscriptions — so dependency changes and unmount do not stack or leak.
Async race conditions
Superseded requests resolving out of order, and cancelling them with an AbortController or an ignore flag in the cleanup.
Reconciliation and keys
What a key actually promises React, and why an index key corrupts state in any list that reorders or filters.
State immutability
Why re-render is decided by reference identity, and what mutating state in place silently costs you.
Reviewing a diff
Reading a patch the way a senior engineer does: what breaks, under what input, and what you would ask the author to change.
Where this fits with the rest of Gronex
Gronex is a repository-based interview prep platform: most of the catalogue hands you a real backend repository with failing tests and asks you to make them pass. These React exercises are the review half of the same idea, and they take about a minute each. If you are preparing for backend rounds too, the full catalogue runs in the browser across Java, Python, Node.js and C++.