Back to the Catalog
algorithms
frontend
javascript
async

Systems-Level CS in the Browser: A Frontend Engineer's Guide to Reconciliation, the Event Loop, Race Conditions & Hashing

40 questions · by Quizbun

A 40-question deep dive built to help frontend engineers better understand algorithms by grounding classic computer-science ideas in browser behavior you can actually observe. Four systems-level topics: the Virtual DOM as a tree-diff algorithm (reconciliation heuristics, list keys, Myers diff), the event loop as a scheduling problem (micro- vs. macro-tasks, requestAnimationFrame, task starvation, cooperative yielding), client-side race conditions and cancellation (out-of-order responses, stale closures, AbortController), and identity, equality & hashing (=== vs. value equality, structural sharing, content hashes). Every "predict the output" answer was executed in Node to confirm it, and every answer links to MDN, the React docs, Wikipedia, or a primary source so you can verify it yourself.

Start

Questions

  1. Not answered. The Virtual DOM is often sold as a performance trick. From a CS standpoint, what problem is React's reconciler actually solving?
  2. Not answered. The best known algorithms for the general tree-diff problem run in about O(n³). How does React get reconciliation down to O(n)?
  3. Not answered. Between two renders, an element at the same position changes type — a <div> becomes a <span>. What does React do?
  4. Not answered. You render a list of <input>s with key={index}. The user types into the first input, then you prepend a new item to the array. What does the user observe?
  5. Not answered. Same list, but now key={item.id} with stable ids. You prepend a new item. What actually mounts?
  6. Not answered. git diff and many list-diffing libraries are built on Myers' diff algorithm. What does it compute, and at what cost?
  7. Not answered. Which statements about React keys are true? Select all that apply.
  8. Not answered. React's O(n) reconciliation rests on deliberately unsound heuristics. Which of these are assumptions React really makes? Select all that apply.
  9. Not answered. An app uses key={index} for a reorderable list of rows, each holding local state (an open/closed toggle, a focused input). Which bugs are plausible? Select all that apply.
  10. Not answered. The state-of-the-art algorithms for the general tree-diff problem run in roughly O(n^k) time, and React's reconciliation docs cite that exponent as the reason it uses heuristics instead. What integer is k?
  11. Not answered. After the currently running task finishes, how does the event loop treat the microtask queue?
  12. Not answered. Promise.resolve().then(f) and setTimeout(g, 0) both mean "do this later." Which runs first, and why?
  13. Not answered. Where does a requestAnimationFrame callback sit relative to microtasks and setTimeout?
  14. Not answered. What sets requestIdleCallback apart from setTimeout and requestAnimationFrame?
  15. Not answered. Why can an endlessly self-rescheduling microtask freeze the page, while an endlessly self-rescheduling setTimeout does not?
  16. Not answered. Which of these schedule a microtask (rather than a macrotask)? Select all that apply.
  17. Not answered. React's concurrent renderer "time-slices" long work so the page stays responsive. Which statements about cooperative yielding on the main thread are true? Select all that apply.
  18. Not answered. Which statements about the browser event loop are true? Select all that apply.
  19. Not answered. Predict the output. How many lines are logged before "setTimeout" appears?
  20. Not answered. Predict the output. Type the four numbers in the exact order they are logged, with no spaces (e.g. 1234).
  21. Not answered. A search box fires a request on every keystroke. The user types react. Results for rea sometimes appear after results for react, overwriting them. What is the root cause?
  22. Not answered. Without cancelling anything, what's the simplest correct fix for out-of-order search responses?
  23. Not answered. What does AbortController actually do when you call controller.abort() on a fetch started with { signal: controller.signal }?
  24. Not answered. A setInterval callback created inside a component keeps logging count as 0, even though count visibly increments on screen. Why?
  25. Not answered. The React docs' data-fetching effect declares let ignore = false and returns () => { ignore = true; }. How does that prevent a race?
  26. Not answered. A "Pay" button fires a POST; the user double-clicks and the network retries on flaky wifi. Why does making the endpoint idempotent (e.g. with an idempotency key) matter?
  27. Not answered. Which statements about client-side race conditions are true? Select all that apply.
  28. Not answered. You're fixing a "type fast, see the wrong results" bug in a search component. Which approaches correctly stop stale results from winning? Select all that apply.
  29. Not answered. Which fixes correctly stop a setInterval / event callback from reading a stale count? Select all that apply.
  30. Not answered. Predict the output. This logs the same number three times — type that number.
  31. Not answered. Why is {} === {} false while 2 === 2 is true?
  32. Not answered. A memoized child re-renders every time its parent does, even though "nothing changed." The parent passes style={{ margin: 0 }}. Why does this defeat React.memo?
  33. Not answered. Where does Object.is(a, b) differ from a === b?
  34. Not answered. Immer (and persistent data structures generally) return a new state object on every update but reuse untouched subtrees. Why is that the perfect partner for ===-based change detection?
  35. Not answered. Content hashing shows up as app.8f3b2c.js in build output, as integrity="sha384-…" on a <script>, and as Quizbun's own per-Question Content hash. What single property makes hashing useful in all three?
  36. Not answered. Why can't a hash give a guaranteed-unique fingerprint for arbitrary content, and when does it matter?
  37. Not answered. Which statements about shallow vs deep equality are true? Select all that apply.
  38. Not answered. Which of these create a new reference on every render, potentially busting memoization or useEffect deps? Select all that apply.
  39. Not answered. Which statements about hashing and content-addressing are true? Select all that apply.
  40. Not answered. How many distinct object references does this array contain — that is, how many of its elements are !== each other?