Component Tree
Last updated: 2026-11-02
Component Tree Component Tree
A React application is a tree of nested components: the root component sits at the top and children go further down. Data flows one way down that tree through props, and understanding the shape of the tree helps you plan how finely to split components and where state should live. The tree is also the map you consult when a value has to be shared by several components.
| Group | Core Concepts |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
<App> ← root component
<Header /> ← child component
<TodoList>
<TodoItem /> ← one level deeper; data travels down through props
</TodoList>
</App>Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The root component title shows at the top, followed by two bordered panels (Today / Tomorrow), each listing its tasks as rows — exactly the three levels of root component → panel → row.💡 Key Points
ℹ️ Info The component tree describes composition relationships while the DOM tree describes page elements; the two look similar but are not the same thing.
💡 Tip When several components share the same data, lift the state to their closest common parent and distribute it through props.
⚠️ Warning Deep hierarchies make props drilling long and noisy; use Context or a state library when data has to cross several levels.
🏷️ More Core Concepts
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Are the React component tree and the DOM tree the same thing?
A No. The component tree is the composition structure of your JSX, while the DOM tree holds the real nodes in the browser; one component may render zero, one or several DOM nodes.
Q Which level of the component tree should state live on?
A Put it on the closest common parent of the components that need it, and keep details that belong to a single component inside that component, to avoid over-lifting.
Q How do I keep the component tree from getting too deep?
A Prefer composition (children) over layer after layer of wrappers, use Context for data that stays fixed across many levels, and leave render optimizations to memo instead of hand-tuning the hierarchy.
