← Frontend interview questions

Virtual DOM Interview Questions

The virtual DOM is not magic—it is a diff-friendly snapshot React compares to decide what real DOM work to do. Interviewers use it as a doorway into how you think about rendering cost, key stability, and why some "optimizations" actually hurt. Senior answers mention scheduling (what blocks paint), how concurrent features change urgency, and when the real villain was layout thrash or an enormous third-party script, not React itself.

Keys: the interview favorite

Explain why index keys lie during reordering, how that corrupts component state, and what you did when a product designer insisted on draggable lists. If you have fixed a list bug caused by unstable identity, that story is worth more than quoting the docs.

Memoization with a conscience

Pair with JavaScript fundamentals

Reconciliation interacts with closures and identity. Brush up closures if stale state in effects has ever bitten you—then finish with web performance so you can articulate user-visible wins, not only render counts.

Memoization vs reality in enterprise portals

Stable row renderer for a big Azure Monitor–style table

const Row = memo(function Row({ id, label, onOpen }: Props) {
  return (
    <tr>
      <td>{label}</td>
      <td><button onClick={() => onOpen(id)}>Details</button></td>
    </tr>
  );
}, (a, b) => a.id === b.id && a.label === b.label);

// Parent must pass stable onOpen: useCallback or lift dispatch

Ops portals love wide tables. The bug: every parent render recreates onOpen, memo does nothing, virtualization still chokes. Tell the interviewer you profiled it, fixed callbacks, and maybe moved selection state into a ref for high-frequency updates.

Questions with sample answers

These are interview-ready outlines—sound human by swapping in your own metrics, team names, and war stories. The examples are generic on purpose so you can map them to what you actually shipped.

  1. Primary prompt

    Why do unstable list keys cause state bugs—sketch a minimal repro in words.

    Reorder list with index as key—React reuses wrong component instance; internal state or controlled input jumps rows. Fix: stable business id as key.

  2. Primary prompt

    When would React.memo hurt more than help?

    When props always change or comparison cost > render cost; when it hides real fix (unstable parent props); shallow compare false positives on object props.

  3. Primary prompt

    Explain batching in React 18+ and how it affects async state updates in event handlers.

    Multiple setState in same event tick batch to one render; in async setTimeout also batches in 18+—fewer intermediate paints; still use functional updates for dependent state.

  4. Primary prompt

    You profiled a list: every keystroke re-renders 2k rows—layer fixes from cheapest to most invasive.

    1) Debounce filter input. 2) Memoize row + stable props. 3) Virtualize list. 4) Move filter to server/worker. 5) Redesign UX—prove each with profiler.

Follow-ups interviewers often ask

Expect nested "why?" questions—brief answers here; expand with your production defaults.

  1. Follow-up

    How does useDeferredValue interact with user typing in a search UI?

    Keeps input snappy while deferring expensive derived render (heavy list) to lower priority—shows slightly stale list while typing fast.

  2. Follow-up

    What is the difference between blocking and concurrent rendering at a practical level?

    Concurrent can interrupt low-priority work for urgent updates (input)—smoother UX; blocking finishes entire tree before yielding—can jank main thread.

  3. Follow-up

    When do you lift state up vs colocate to reduce render fan-out?

    Lift only when multiple subtrees need it; colocate to minimize re-render radius—default low, lift with evidence.

  4. Follow-up

    How do you verify a perf fix in production, not only in DevTools?

    RUM Web Vitals (LCP, INP), compare canary vs control, error rates unchanged; segment by device and region.

  5. Follow-up

    What third-party code often invalidates memoization assumptions?

    Analytics wrappers creating new function props each render, CSS-in-JS without cache, context providers with unstable value objects.