React render lab

Why did that render? This lab runs the real React 19.3 development build in a frame on the page and, after every commit, shows each component that rendered with the reason: state changed: count, props changed: onClick, context changed: Theme, or parent App rendered (props are equal — React.memo would skip this). Edit the code and it runs again.

It reads React’s own fiber tree the way React DevTools does — through the DevTools hook React calls after each commit — so the reasons are what React actually did, not a guess from your code.

How to use it

Pick a lesson from the list. Each has a short explanation, code to run and things to try. Edit the code (JSX or TypeScript/TSX) and it re-runs after a pause, or press Run (Ctrl/⌘
Enter). Your edits are kept per lesson; Reset code puts the original back.
Component tree. Rows that rendered in the latest commit flash; the badges say why (state, props, context, parent, mount), ×n counts renders since the run started, and the time is the component’s own render time. Components that did not render are dimmed.
Commits. One bar per commit, its height the render time. Click a bar to see the tree as it was in that commit, with what triggered it; Back to live returns.
Highlight updates outlines each component in the preview as it renders, from teal (rarely) to red (often), like React DevTools' option of the same name.
Console shows console.log from your code and React’s own warnings (missing keys, and so on). With StrictMode on, lines logged during React’s second, checking call of a component are marked StrictMode.
React Compiler compiles your code with babel-plugin-react-compiler 1.0 before running it; Show compiled shows the output. Compare the tree with it off and on.
Share link (at the top) copies a link with the lesson and your code.

The lessons: what makes a component render; lifting state up and moving it down; context that renders too much; memo, useMemo and useCallback (and when they don’t help); the index-key bug in lists; useEffect order and cleanup; StrictMode’s double renders and effects; stale closures; useTransition and useDeferredValue; Suspense with use(); and what React Compiler changes.

Only react, react-dom and react-dom/client can be imported. To run other JavaScript, use the language sandbox; to see what your real app’s bundle contains, the bundle analyzer.

What the reasons mean

state — a useState/useReducer (or useTransition, useSyncExternalStore…) value in this component changed. Names come from const [name, setName] = useState() in your code; state inside custom hooks shows as “hook #n”.
context — a context this component reads has a new value (compared with Object.is).
props — the named props differ from last time (compared with Object.is).
parent — the parent rendered and passed props that are all equal: React renders children by default, and React.memo would have skipped this one.
mount — first render.

Render times come from React’s profiling timers in the development build: useful for comparing components with each other, but development React is several times slower than production.

Browser support

Any current browser. The first run downloads about 700 KB, so it takes a few seconds on a slow connection; the React Compiler option adds about 600 KB.

Privacy

Your code runs in a frame on this page and is not sent anywhere. On the first run the page loads React 19.3.1 (the development build, about 250 KB compressed) and @babel/standalone 7.29 (the JSX/TypeScript compiler, about 420 KB compressed) from cdn.jsdelivr.net; the browser caches them. babel-plugin-react-compiler 1.0 (about 600 KB compressed) loads only if you tick React Compiler. Your code is kept in this browser’s local storage, and is in the link only when you make one.