DEV Community

kirandeepjassal-crypto
kirandeepjassal-crypto

Posted on Originally published at prepstack.co.in

React Interview Questions for Senior Developers — Hooks, Reconciliation, Fiber Architecture, Performance (Deep Answers)

#javascript #react #interview #webdev

Originally published at prepstack.co.in

Senior React interviews don't ask "what is useState." They ask why hooks have to be called in the same order, what a Fiber node actually contains, why React.memo is sometimes a regression, and what changed in concurrent rendering.

The questions are the same shape the React team thinks in — and the people who answer them well are the people who can debug production reconciliation bugs and reason about render performance instead of guessing. Here's a sample of the 30 (full set on the blog), across Hooks, Reconciliation, Fiber, and Performance.

Q: Why must hooks be called in the same order every render?

React doesn't store hook state by name — it stores it by call order, in a linked list on the fiber:

fiber.memoizedState → [hook0] → [hook1] → [hook2] → null
                       useState  useEffect  useMemo
Enter fullscreen mode Exit fullscreen mode

Call one conditionally and state silently shifts to the wrong slot:

function Buggy({ flag }) {
  const [a, setA] = useState(0);
  if (flag) useEffect(() => {}, []);   // conditional — shifts every later hook's slot
  const [b, setB] = useState(0);       // when flag flips, b gets the effect's old slot
}
Enter fullscreen mode Exit fullscreen mode

That single fact is the entire reason for the Rules of Hooks.

Q: Why is React.memo sometimes a performance regression?

Because the props comparison isn't free, and if props aren't referentially stable the memo never hits — you pay the comparison and the re-render.

// REGRESSION — new object every render → memo always misses
<Memo data={{ a: 1 }} />

// HELP — stable reference → memo hits
const data = useMemo(() => ({ a: 1 }), []);
<Memo data={data} />
Enter fullscreen mode Exit fullscreen mode

Only wrap when (a) the component is expensive to render and (b) its props are referentially stable.

Q: What's a Fiber and why was it introduced?

A Fiber is a unit of work representing one node in the tree. Fiber (React 16+) replaced the old recursive stack reconciler so reconciliation could be interruptible, prioritized, and resumable — the foundation of Concurrent React. The old reconciler ran to completion and blocked the browser; the new one is a loop that yields between fibers and remembers where to resume.

Q: How does the React Compiler change performance work?

It auto-memoizes components and values at build time — the output you'd write if you were perfectly disciplined about memoization, minus the noise. For React 19+, "wrap everything in useMemo just in case" is obsolete. The senior signal is knowing what it won't do: it won't fix a bad data shape (a 12,000-row table still needs virtualization) and it doesn't replace structural wins like code splitting and Server Components.

What interviewers are actually testing

Not trivia recall — the mental model:

  • Can you reason about why hooks have to be called in order?
  • Can you predict whether a refactor causes unnecessary re-renders?
  • Can you decide between server pagination and virtualization for a 50k-row table?
  • Can you read a Profiler flamegraph and identify the structural issue, not just guess useMemo?

If the model is there, you can derive the answer to questions you've never seen — and that's the senior signal.

Full guide — all 30 questions across Hooks, Reconciliation, Fiber Architecture, and Performance, each with a short answer, the deep dive, and the senior signal — is on PrepStack.

Top comments (0)