React Render Visualizer
Understand React rendering through an interactive component tree. Trigger rerenders, observe which components update and why, compare memoized vs un-memoized trees, and see flamegraph-style render timings.
Component Tree
<App>state<ThemeContext>state<Navbar>memoctx<NavLogo><NavLinks>memo<Main><Sidebar>memoctx<SideItem ×3><Content><Filter>memostate<List><ListItem ×12>memo<Footer>memoctxRender Flamegraph
Trigger an action to see the flamegraph
- • When a component's state changes, React re-renders it and all children by default.
- •
React.memowraps a component and skips re-render if props haven't changed (shallow equal). - • Context changes bypass memo — all consumers re-render regardless.
- • Use
useMemo/useCallbackto stabilize props passed to memo components.
Action Log
No actions yet — trigger one above.
Frequently Asked Questions
Can this inspect my real app?
This is an educational simulator using a built-in component tree. For real-app profiling, use the React DevTools Profiler tab in Chrome or Firefox.
What triggers a React rerender?
A component rerenders when: its state changes, its parent rerenders (unless memoized), a context it subscribes to changes, or a hook it uses returns a new value.
What does React.memo do?
React.memo wraps a component and shallowly compares its props before each render. If props haven't changed, React skips the render entirely — saving CPU for expensive subtrees.