React Trees Workbench

Paste React code and read it in the parent-owner notation from A visual notation for React's parent and owner trees. The rows are the parent tree, where output lands. The arcs are the owner tree, where props come from. Click a boundary square, context provider, or memo disc to see what it covers.

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.