A comprehensive visual guide to how React works under the hood — from fiber architecture to concurrent rendering. Each visualizer lets you step through the concept interactively.
How React Fiber builds and traverses the fiber tree using depth-first work loops.
How React creates a virtual representation of the UI and diffs it to find minimal changes.
The algorithm React uses to compare old and new trees and decide what to update.
The full journey from JSX to pixels — render phase, commit phase, and browser paint.
Mount, update, and unmount phases — how React manages component instances.
How React catches errors in the component tree and renders fallback UI.
Rendering children into a different DOM node outside the parent hierarchy.
How the key prop helps React efficiently reconcile lists and avoid unnecessary re-mounts.
How React stores hooks as a linked list on each fiber node and walks them every render.
Setup, cleanup, and dependency tracking — when effects run and why.
How setState queues updates, batches them, and triggers a single re-render.
How React caches computed values and function references across renders.
When and why components re-render, and how React.memo prevents unnecessary renders.
How useRef persists values across renders and provides direct DOM access.
Time slicing, priority lanes, and interruptible rendering in React 18+.
Fallback rendering, code splitting, and streaming SSR boundaries.
Priority-based rendering — urgent vs non-urgent updates with startTransition.
Server/client boundary, RSC payload streaming, and zero-bundle server rendering.