The notation at a glance
Diagrams in this notation draw a React app as two trees. The rows and solid elbows are the parent tree: JSX nesting, where each component's output lands. The dashed arcs are owner edges: which component rendered which, so they point back to where the props come from. Everything else is a mark layered onto those rows:
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
state dots
one red dot per state hook (useState, useReducer, ...)
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
ran only on the server; regions tint contiguous server rows, 'use client' badges mark client entries
folded run
n same-named siblings drawn as one row; click ×n to unfold
Each linked term above jumps to its section in the full walkthrough, A visual notation for React's parent and owner trees. To see the notation applied, paste your own code into the React Trees Playground, or draw it live from a running app with react-parent-owner-trees.