React Re-render Visualizer
Trigger state updates and watch render counts propagate through a component tree, with and without memoization.
What you'll learn
- See which components re-render for a given state update
- Measure what React.memo actually prevents
Interactive laboratory
Controls
Every counter is a real React renderComponent tree
plain componentsParent
Render #1 · state tick = 0 · last rendered during action #0
Child A
Render #1 · prop value = 0 · last rendered during action #0
Child B
Render #1 · prop value = 0 · last rendered during action #0
Sibling
Render #1 · no props from Parent · last rendered during action #0
Counters reset when the memoization mode changes, because the subtree is remounted.
- Total renders
- 0
- Parent
- 0
- Child A / Child B
- 0 / 0
- Renders avoided
- 0
What happened?
Parent has rendered 0 times; Child A 0, Child B 0, Sibling 0.
With memo off, a Parent state update re-renders the whole subtree, even for children whose props never changed. That is React's default, and it is usually fine: rendering is not the same as committing to the DOM.
Toggle React.memo and interact again to compare both modes.
Why it happened
React re-renders a component when its state changes and, by default, all of its descendants.
Making that visible turns performance work from guesswork into measurement.
Key takeaways
- A re-render is not a DOM update
- Memoization only pays off when props are genuinely stable
Tags
- react
- rendering
- memo
- state