15 posts
React's 45KB comes from synthetic events and compatibility layers Preact drops. At 3KB, it calls native DOM directly. Here is what that trade-off means.
React.lazy() makes a 5MB app's first load equal to just the landing route cost. Here is how route code splitting works and where it silently fails.
Perceived and measured performance diverge more than most developers expect. LinkedIn's skeleton screen research explains why, and when skeletons hurt.
All blogs in the React & JS Performance series in reading order, plus quick reference on layout thrashing, will-change, passive listeners, and INP.
How to answer practical frontend performance interviews in React: a seven-area framework—rendering, network, mobile, bundles, assets, memory, and measurement.
How WebSocket subscriptions, stale closures, and unbounded caches create memory leaks in React apps — and how to find and fix them with Chrome DevTools.
Why React SPAs refetch data you already have, and how to fix it: HTTP cache headers, stale-while-revalidate, request deduplication, and prefetch strategies.
CPU-heavy tasks block the UI — Web Workers fix that. Integrate Workers in React with Comlink, custom hooks, and Vite, with before/after profiling results.
10,000 DOM nodes is slow even if they're not visible. When to paginate, when to infinite scroll, when to virtualize — and the real cost of each approach.
How startTransition and useDeferredValue fix frozen inputs and laggy UIs by separating urgent updates from deferred ones — with real before/after examples.
Most React memoization is premature. This breaks down when memo, useMemo, and useCallback actually help and when they add memory overhead with no real gain.
Render phase vs commit phase, reconciliation and fibers, what triggers re-renders, referential equality traps, context pitfalls, and React 18 batching.
At 60Hz the browser has ~16.6ms per frame for JS, layout, and paint. Why load scores miss jank and what it means for trading and live data UIs.
Redux, Zustand, Jotai, and Valtio compared from the inside. Centralized, atomic, and proxy-based React state patterns and when each one wins on scale.
React error boundaries use class lifecycles, not hooks: what render errors they catch, what async and event errors they skip, and how to structure fallbacks.