React Edge Cases
Hooks, rendering, reconciliation, and state management
Start Here
Essential reads to understand the key concepts and patterns.
React 19 use() Hook: Promise Mechanics and Suspense Integration
The use() hook throws promises to trigger Suspense — but promise identity, conditional calls, and SSR streaming create unexpected behaviors.
React Key Prop: The Reconciliation Deep Dive
Keys aren't just for warning suppression—they control whether React preserves or destroys component instances. Misuse causes invisible state bugs and performance problems.
React Suspense Error Boundaries: Recovery Patterns
Errors inside Suspense don't always reach your ErrorBoundary. Master propagation rules, SSR behavior, and recovery patterns for resilient React apps.
React Concurrent Rendering Tearing: When External Stores Break
React 18 concurrent rendering can pause mid-render—if external stores change during that pause, components see inconsistent data. useSyncExternalStore prevents this 'tearing' problem.
React 18 Automatic Batching: When It Silently Breaks
React 18 batches all state updates automatically—unless you're using legacy render, flushSync, or hitting async boundaries. Know when batching breaks.
More Articles
React Compiler Memoization Boundaries
React Compiler auto-memoizes most code—but effects, refs, and external stores still need manual attention.
RSC Streaming: The Reverse Proxy Gotcha
Your RSC streaming might be silently buffered by Nginx defaults—here's how to fix it
React Render Bailout: When React Secretly Skips Your Update
When React silently skips your re-render—Object.is, lanes, and the children-as-props escape hatch
React useId: Why Math.random() Breaks Hydration
Math.random() IDs break hydration—server and client generate different values. useId creates stable, deterministic IDs based on component tree position.
useEffectEvent: Solving Stale Closures Forever
Stop hacking refs—use the stable hook designed for non-reactive logic