Deep dives into modern web development, engineering practices, and my personal journey.
Learn how to use React's built-in Profiler component to get per-commit render timings for any subtree, so you know which components are slow and whether memoization is actually paying for itself, before reaching for useMemo.
You'll learn what concurrent rendering actually changed in React (renders became interruptible), why useTransition and useDeferredValue don't make code faster, when to reach for each one, and the caveats that quietly break them: the missing memo, uncancelled requests, and render starvation.
A measurement-first walkthrough of what actually bloats React and Next.js bundles, from barrel files and client boundaries to dynamic imports and library swaps, with the exact code and config to fix each one.
You'll learn why out-of-order async responses show stale data in React, why debouncing and a faster network don't fix it, and which tool to reach for: an ignore flag, AbortController, a request token, useActionState's queue, or a data library.
You'll learn why stale closures happen in React (it's not a React bug), how to spot them in useEffect, useCallback, and async code, and which fix to reach for: dependencies, functional setState, refs, or useEffectEvent.
You'll learn eighteen side-effect and reference patterns that leak memory in React and Next.js, what the failing code looks like, and the cleanup that actually stops it.
Most React performance problems are solved before you ever reach useMemo, and knowing the right order of operations — colocation, composition, then memoization — will save you hours of debugging cascading stale closures.
Headless components separate behavior and state from rendering, so the same dropdown logic can power a basic select, a combobox, and a command palette without duplicating a line of state management.
Before, you'd run the trace, describe what you saw, and hand it back to the agent as prose. Chrome DevTools MCP cuts out the relay so the agent runs the trace itself.
Children composition handles rendering decisions, but when sibling components need shared state, you need compound components with Context. Here's how to build them correctly.
Most prop explosion problems have the same root cause: components making rendering decisions they shouldn't own. Here's how children-based composition fixes it across buttons, cards, alerts, form fields, and layouts.
Most React apps only scratch the surface of browser storage. This guide breaks down the five caching layers, from in-memory state to the HTTP cache, when to use each one, and how to connect them in a Next.js app.