Senior React Interview Questions & Answers

THE QUESTIONS

Real questions, senior answers

1. 01

   What is React Fiber, and how is it different from the virtual DOM?

   Before Fiber, rendering was synchronous: compute the whole virtual DOM in one shot, then commit. A huge tree meant a blocked main thread.

   Fiber (React 16) is an intermediate tree of plain JavaScript objects — one fiber per component, holding state, memoized props and references to child and sibling. Render work happens on the fiber tree, and crucially, it can be paused and resumed.

   The virtual DOM still exists — it's now computed from the fiber tree and used only for diffing against the previous version.

   React FiberVirtual DOMConcurrent React
2. 02

   Can you explain the reconciliation process in React?

   Old React used the stack reconciler: a state change triggered a recursive render from the root to the leaves, all on the call stack, synchronously. Big tree + data fetching = a form that won't respond while React renders.

   With Fiber, React copies the current fiber tree in the background, applies queued updates node by node, and computes the new virtual DOM from it. Then the classic part: diff against the current DOM and commit the changes.

   The commit phase is still synchronous — it's the render phase that became interruptible.

   Stack reconcilerWork-in-progress treeCommit phase
3. 03

   Why did React need Fiber at all? What does it enable?

   Scheduling. Fiber works with a priority queue and a scheduler: React asks the browser for idle time via requestIdleCallback, works within the ~50ms frame budget, and pauses when the browser needs the main thread back.

   A high-priority update — the user typing — can interrupt a low-priority one — rendering a fetched list. React parks the low-priority work-in-progress tree, handles the input, then resumes.

   That's what "concurrent React" means: the UI stays fluid because rendering yields to the browser.

   requestIdleCallbackPriority queueFrame budget
4. 04

   How does React prioritize updates?

   Internally there's a priority ladder: discrete events like clicks and typing at the top, then continuous events like scroll, then normal work like data fetching, down to low-priority things like offscreen route changes.

   You don't manage it directly — but knowing it exists explains why input stays responsive while a heavy list renders.

   Update prioritiesDiscrete events
5. 05

   How does the diffing algorithm work? Why does React use heuristics?

   Properly diffing two trees is O(n³) — a thousand elements would be a billion operations. React cheats with two heuristics.

   One: if an element's type changed, throw away the subtree and rebuild it — re-rendering from scratch is cheaper than deep comparison. Two: assume keys are stable and unique, and use them to match list items across renders.

   DiffingO(n³)Heuristics
6. 06

   Why shouldn't you use array indexes as keys?

   Keys only help if they're stable. Delete item five and every item after it shifts index — React now matches the wrong fibers to the wrong data, skipping re-renders it needed or redoing ones it didn't.

   Use a real identity from the data.

   KeysList rendering
7. 07

   How deep into React internals should you actually go?

   Depends on your positioning. Senior full-stack: the motivation and the top-level API are enough — you'll never touch a fiber directly.

   Senior React/frontend: go deep. The market is crowded and this depth stands out. Bonus: the data structures involved — queues, priority heaps, trees — sharpen your engineering vocabulary everywhere else.

   Career strategyInterview positioning
8. 08

   Where should you start if you want to learn React internals?

   Start with the two browser APIs the whole design orbits: requestIdleCallback (the browser granting background work time) and requestAnimationFrame (the pre-repaint hook where committed changes land).

   Everything Fiber does — the priority queue, the interruptible render — exists to use those two APIs well. Fundamentals first; the framework follows.

   Browser APIsFundamentals first