Master React through interactive visualizations. Explore hooks, rendering, patterns, and performance.
HTML-like syntax that compiles to JavaScript
Reusable UI building blocks with one-way data
Building complex UIs from simple parts
Rendering different UI based on conditions
Rendering arrays with identity tracking
Adding and updating local component state
Synchronizing components with external systems
Persistent mutable values without re-renders
Sharing data without prop drilling
Managing complex state with dispatch and actions
Caching expensive computations between renders
Memoizing functions to prevent unnecessary re-renders
Synchronous DOM reads before browser paint
Reusable stateful logic extracted into functions
useActionState, useFormStatus, useOptimistic, and use()
Efficient UI updates through tree diffing
Mount, update, and unmount phases in hooks
What causes components to re-render
React-managed vs DOM-managed form values
Direct DOM manipulation via refs
Related components sharing implicit state via context
Sharing logic via functions that return JSX
Functions that enhance components with extra behavior
Catching render errors with fallback UI
Advanced context composition and optimization
Rendering outside the parent DOM hierarchy
Server-side form handling without API routes
Skipping re-renders when props are unchanged
Loading code on demand to reduce bundle size
Declarative loading states for async operations
Non-blocking UI updates with priority scheduling
Zero-bundle components that run on the server
Automatic memoization that replaces useMemo and useCallback