Track F
Frontend, under the hood
What actually happens inside a UI event or a render: capture/bubble, the rendering pipeline, batching, shared state, and async correctness.
- The event journey: capture vs. bubble
A click doesn't happen "at" the element you clicked — it travels down from window to that element and back up again, and every listener along the way gets a turn. This lesson walks that two-phase journey, untangles stopPropagation from preventDefault, and explains why React attaches almost no real DOM listeners at all.
14 min - Pointer events and setPointerCapture
Drag a square fast enough and a handler wired only to mousemove-style logic loses it the instant the cursor crosses the element's edge. This lesson unifies mouse/touch/pen into one pointer event model, then shows exactly what setPointerCapture changes about event routing — and why pointercancel is not optional to handle.
13 min - Refs vs. state: why the hot path skips setState
A ref is a box React hands you and then never looks at again; state is a box React watches so closely that touching it triggers a full render, diff, and commit. This lesson walks the real stages a render costs, then shows why a drag handler that fires 100 times a second should write to a ref and the DOM directly, calling setState exactly once when the gesture ends.
15 min - Layout, paint, composite: why transform is cheap
Every visual change you make to the DOM runs through a three-stage pipeline, but not every property pays for all three stages. This lesson explains layout, paint, and composite as the browser actually executes them, and why animating transform or opacity can skip two-thirds of that work while animating top or left never can.
14 min - Batching DOM writes with requestAnimationFrame
A `pointermove` listener can fire a dozen times before the screen ever repaints, and a handler that writes to the DOM on every one of those events throws away all but the last write. This lesson covers the ref-plus-rAF coalescing pattern that guarantees exactly one DOM write per frame, the guard flag that makes the "at most one" part actually true, and why tying writes to the paint schedule beats guessing a timeout interval.
12 min - Layout thrashing: the forced synchronous layout trap
The browser is lazy about layout on purpose, batching every style and DOM change in a tick into one pass right before paint. Reading certain geometry properties breaks that laziness by demanding an up-to-date answer immediately, and a loop that alternates reads and writes turns one cheap layout into dozens of expensive ones. This lesson walks through why that happens, fixes it with a read-then-write pass, and lets you measure the cost live in your own browser.
13 min - State slicing and selectors: why one big store hurts
A component that reads "the whole store" re-renders on every change to that store, whether or not the fields it actually uses moved. This lesson walks the mechanism behind that waste in Zustand and Context, the fix — slicing state by change-frequency and subscribing with narrow selectors — and the transient-update escape hatch for state that changes too often to render at all.
15 min - Cross-origin iframes: postMessage and focus routing
A cross-origin <iframe> isn't a piece of your page — it's a second, fully separate document, and the browser deliberately gives you no automatic access to its events, its DOM, or its focused element. This lesson covers the one sanctioned channel across that boundary, postMessage, the origin check that makes it safe rather than a liability, and how to detect focus moving into an iframe without ever seeing what's focused inside it.
13 min - Race conditions in async UI code
Type "re" then quickly "react" into a search box and two requests go out — nothing guarantees the "re" response arrives second. This lesson works through the exact failure (a faster request finishing first and overwriting newer, correct state with stale data), the request-id-tagging fix in full, and why real cancellation with AbortController is strictly better than discarding a result after the fact.
13 min - AbortController: cancelling what you no longer need
The previous lesson's "Fix 2" — stop the stale request instead of discarding its result — has a name and a real mechanism behind it. This lesson covers what AbortController and AbortSignal actually are, why they're deliberately two separate objects, and the exact useEffect cleanup pattern that turns "the component unmounted" into "the network stops."
12 min - Stale closures in React
A useEffect with an empty dependency array logs the count from the first render, forever, even as the number on screen climbs. Nothing about closures is broken here — this lesson traces exactly which variable got captured and when, then works through the two real fixes, recreating the closure on a dependency change versus reading a ref that's always current.
12 min - useEffect discipline: when it's the right tool
useEffect exists for exactly one job — synchronizing your component with something outside React's control, like a subscription or a WebSocket — and not as a generic "run this after render" hook. This lesson works through the classic misuse (deriving state with an effect instead of computing it during render), the correct use (a subscription with real cleanup), why skipping cleanup is a silent, accumulating bug rather than a style nit, and the dependency-array footgun that quietly feeds an effect stale data.
14 min - Modeling connection state as a machine, not booleans
Four booleans — isConnecting, isConnected, isError, isReconnecting — can be true and false in any combination, including ones that don't make sense, and nothing in that shape stops it. This lesson replaces them with one variable whose type is a fixed set of named states, walks the real WebSocket lifecycle those states model, and works through exponential backoff with jitter as the reason the transition out of a dropped connection isn't just "try again."
14 min - Testing state-heavy async logic without flakiness
The previous lesson turned connection status into a state machine with a pure transition(state, event) function — this lesson is the payoff. It shows how to test that function directly with zero mocking, fake the WebSocket at the I/O boundary to drive it, and fake timers to collapse minutes of exponential backoff into milliseconds, turning a slow, flaky integration test into a fast and deterministic one.
14 min - Virtualized lists: rendering only what's on screen
A list of 10,000 rows rendered naively means 10,000 real DOM nodes sitting in memory and in the layout tree, when the viewport can only ever show 15-20 of them at once. This lesson works through the actual mechanism behind virtualized lists — a small mounted window, spacers that keep the scrollbar honest, and the index math that decides what's currently real.
10 min