React Trees Playground
Paste React code and read it in the parent-owner notation from A visual notation for React's parent and owner trees. New to the parent-owner distinction? Start with Parents & Owners in React: Data Flow. The rows are the parent tree, where output lands. The arcs show the owner tree, where props come from. Click a an area, such as a context provider, or an error boundary see what part of the parent tree covers.
The walker and renderer behind this page are published as react-parent-owner-trees on npm, which also draws these trees live from a running React app.
This draws the initial render, statically. Hooks return their initial values, effects and data fetching never run, and unknown imports become named pass-through rows.
marksforceshare
how to read the marks
a custom component
div, p, ... renders to a DOM node
one of React's own, like a keyed Fragment or StrictMode
JSX nesting, where output lands
who rendered whom, where props come from
props are compared at the disc
createPortal → target
output lands in the target DOM element
arrived via React.lazy
area is who can consume, dot marks the context value, lines run from the dot to components using useContext
catches suspension · exclusive
catches render errors · exclusive
Profiler
measures renders · inclusive
Activity
controls mounting · inclusive
ViewTransition
animates transitions · exclusive