A shop page is a tree of components

By now you can split a page into components and put components inside components. Here is a small tea shop built that way: a header with a search box, a list of products, and a cart summary. Read it from the bottom up, starting at App:

1const products = [2  { id: 1, name: "Green tea", price: 4 },3  { id: 2, name: "Black tea", price: 3 },4  { id: 3, name: "Mint tea", price: 5 },5];6 7function SearchBox() {8  return <input placeholder="Search teas" />;9}10 11function Header() {12  return (13    <header>14      <h1>Tea Corner</h1>15      <SearchBox />16    </header>17  );18}19 20function ProductCard({ name, price }) {21  return <li>{name}: ${price}</li>;22}23 24function ProductList() {25  return (26    <ul>27      {products.map((product) => (28        <ProductCard key={product.id} name={product.name} price={product.price} />29      ))}30    </ul>31  );32}33 34function CartSummary() {35  return <p>Items in cart: 0</p>;36}37 38export default function App() {39  return (40    <>41      <Header />42      <ProductList />43      <CartSummary />44    </>45  );46}

App (lines 38 to 46) renders three components: Header, ProductList, and CartSummary, on lines 41 to 43. Header (lines 11 to 18) renders a heading and, on line 15, a SearchBox. ProductList (lines 24 to 32) uses map on line 27 to render one ProductCard for each of the three products from lines 1 to 5. The result shows the shop name, the search box, three teas with their prices, and Items in cart: 0.

Each component sits inside the one that renders it, and that one inside another, up to App. A shape like that is called a tree: one item at the top, each item with any number of items under it. (You met one in plain JavaScript already: the browser keeps a page as the DOM tree.) React keeps your components as a tree too. Drawn out, the shop looks like this:

The render tree: who renders whom

You can draw a render tree from the code alone. For each component, look at the JSX it returns: every component tag in it (a name with a capital letter, like <SearchBox />) is a child. Tags like <header> and <li> are left out. The words for the parts:

• A node is one component, in one place on the page. The shop's tree has 8.
• The root is the node at the top: the component React renders first. Here it's App, the root component that main.jsx hands to React.
• A parent renders a child. Header is SearchBox's parent.
• The parts below a node, with all their children, are its subtree.

One function can make many nodes. The shop has one ProductCard function, and three ProductCard nodes: one per product, each with its own props. Press Edit & run on the shop and add a fourth product to the array, { id: 4, name: "Oolong", price: 6 }: a fourth card appears, and the tree has a fourth ProductCard node. Delete line 43, and CartSummary leaves the page and the tree.

Why leave out the HTML tags? React isn't only for web pages. The same components can render to a phone app, where there is no <li>. The tags are the platform's building blocks, so the render tree shows only what React manages for you: your components. (React DevTools draws the same tree in its Components tab, which you met in Setting up a React project.)

Top-level and leaf components

Two kinds of node are worth naming. Top-level components sit near the root, like App and ProductList. They often hold the most logic and the most data. Leaf components sit at the bottom and render no components: SearchBox, each ProductCard, and CartSummary. They're usually small, and they're the parts users click and type in most.

The difference matters when something changes. Here is the shop with state in three places: App keeps the cart count, each ProductCard keeps whether it's saved, and SearchBox keeps what you type:

1import { useState } from "react";2 3const products = [4  { id: 1, name: "Green tea", price: 4 },5  { id: 2, name: "Black tea", price: 3 },6  { id: 3, name: "Mint tea", price: 5 },7];8 9function SearchBox() {10  const [query, setQuery] = useState("");11  return (12    <input13      placeholder="Search teas"14      value={query}15      onChange={(event) => setQuery(event.target.value)}16    />17  );18}19 20function Header() {21  return (22    <header>23      <h1>Tea Corner</h1>24      <SearchBox />25    </header>26  );27}28 29function ProductCard({ name, price, onAdd }) {30  const [saved, setSaved] = useState(false);31  return (32    <li>33      {name}: ${price}{" "}34      <button onClick={onAdd}>Add</button>35      <button onClick={() => setSaved(!saved)}>{saved ? "Saved" : "Save"}</button>36    </li>37  );38}39 40function ProductList({ onAdd }) {41  return (42    <ul>43      {products.map((product) => (44        <ProductCard key={product.id} name={product.name} price={product.price} onAdd={onAdd} />45      ))}46    </ul>47  );48}49 50function CartSummary({ count }) {51  return <p>Items in cart: {count}</p>;52}53 54export default function App() {55  const [count, setCount] = useState(0);56  return (57    <>58      <Header />59      <ProductList onAdd={() => setCount(count + 1)} />60      <CartSummary count={count} />61    </>62  );63}

Line 10 gives SearchBox its own state for the search text. Line 30 gives each ProductCard a saved flag, and the button on line 35 flips it. Line 55 keeps the cart count in App, which passes a function down through ProductList to each card's Add button (line 59 and line 44), and passes the count to CartSummary on line 60. Click Add on any card and the count goes up.

Which components render after each click? When a component's state changes, React renders that component again, and then every component below it, its whole subtree. Try it in the playground: the shop runs here, and the tree beside it outlines every component that rendered for your last change.

Add changes App's state, so all 8 components render, even Header and SearchBox, whose props didn't change. Save changes one card's state; it's a leaf, so only that card renders. Typing in the search box renders only SearchBox, once per key you press. That's why leaves render often but cheaply, and why a top-level component with changing state makes a lot of the tree render.

Rendering everything below is normal, and usually fast: React then changes only the parts of the page that differ. When it does get slow, the tree tells you where to look. memo, useMemo and useCallback and The React Compiler show how to skip a part of the tree whose inputs didn't change.

The tree can change between renders

A render tree is a picture of one render. When a component shows different children in different cases, the tree changes from one render to the next. This cart panel can be hidden. Type a gift note, click Hide cart, then Show cart:

1import { useState } from "react";2 3function CartPanel() {4  const [note, setNote] = useState("");5  return (6    <section>7      <h2>Your cart</h2>8      <input9        placeholder="Gift note"10        value={note}11        onChange={(event) => setNote(event.target.value)}12      />13      <p>Note: {note || "none"}</p>14    </section>15  );16}17 18export default function App() {19  const [open, setOpen] = useState(true);20  return (21    <>22      <button onClick={() => setOpen(!open)}>23        {open ? "Hide cart" : "Show cart"}24      </button>25      {open && <CartPanel />}26    </>27  );28}

CartPanel (lines 3 to 16) keeps the note in its own state on line 4, and line 13 shows it. App keeps open on line 19, the button on lines 22 to 24 flips it, and line 25 renders CartPanel only while open is true (&& shows nothing when its left side is false; the Conditional rendering lesson covers it). After you show the cart again, the line says Note: none. Your note is gone.

State belongs to a node of the tree. When CartPanel left the tree, React removed it with everything it kept, including the note. Show cart made a brand-new CartPanel, starting from useState("") again. If the note should survive, it has to live in a node that stays, like App: exercise 6 does that.

The module dependency tree

Real projects don't keep every component in one file. Here is the same shop split the usual way: a file per component, the product data in products.js, and a helper that formats prices in formatPrice.js. Click the tabs to read each file:

1import Header from "./Header.jsx";2import SearchBox from "./SearchBox.jsx";3import ProductList from "./ProductList.jsx";4import CartSummary from "./CartSummary.jsx";5 6export default function App() {7  return (8    <>9      <Header>10        <SearchBox />11      </Header>12      <ProductList />13      <CartSummary />14    </>15  );16}

In App.jsx, lines 1 to 4 import four components. One thing changed from the one-file shop: on lines 9 to 11, App puts <SearchBox /> between Header's tags. Whatever you put between a component's tags reaches it as a prop called children, and in Header.jsx, line 5 shows it inside the <header>. (The Passing props to a component lesson covers children.) In ProductList.jsx, lines 1 and 2 import ProductCard and the product list. In ProductCard.jsx, line 1 imports formatPrice, and the prices now show as $4.00.

The files and their import lines make a second tree, the module dependency tree. Each node is a file (a module), and each arrow is an import. Its root is the entry file, the one the page loads first: here main.jsx, which every live example has (Pop out shows it) and which imports App.jsx.

Each row asks the same question of both trees:

What is the module tree for? Building your app. Before your users get it, a bundler (a tool like the one npm run build runs in the Vite project from Setting up a React project) starts at the entry file, follows every import, and packs the files it reaches into a few files for the browser: the bundle. A file that no import reaches is left out. Try it: OldBanner.jsx sits in the same folder, but nothing imports it yet.

import Header from "./Header.jsx";
import SearchBox from "./SearchBox.jsx";
import ProductList from "./ProductList.jsx";
import CartSummary from "./CartSummary.jsx";

import { formatPrice } from "./formatPrice.js";

Turn on App uses OldBanner: one import line, and OldBanner.jsx joins the tree under App.jsx. Turn off ProductCard uses formatPrice, and formatPrice.js leaves it. Every import pulls a file, and everything that file imports, into the bundle. A big library imported by one small component makes every visitor download it, which is why a slow first load often starts with a look at the module tree. (Loading part of the bundle only when it's needed is dynamic import, and React builds on it with lazy in the Suspense lesson.)

Where the tree comes back later

Much of the rest of this course is about the render tree, even when it doesn't say so. How to read the table: each row is an idea you'll meet, what the tree has to do with it, and the part of the course that teaches it.

The stages, in course order:

• Adding interactivity: state, and the render and commit that follow a change.
• Managing state: choosing which node keeps each piece of state, sharing it through a parent, keeping or resetting it, and context.
• Async and concurrency: Suspense and error boundaries around parts of the tree.
• Performance: when React renders, and how to skip parts of the tree.
• Under the hood: the fiber tree, React's own copy of the tree, with a node for every component and every HTML element, in Fiber: React's unit of work.

Reading the tree of a chat page

A support chat has a sidebar of conversations and a window with the open one. Click Ben and back to Asha. Then type a reply to Asha, and click Ben:

1import { useState } from "react";2 3const conversations = [4  { id: 1, name: "Asha", messages: ["Is the green tea back?", "Great, thanks!"] },5  { id: 2, name: "Ben", messages: ["Where is my order?"] },6];7 8function ConversationItem({ name, active, onSelect }) {9  return (10    <li>11      <button onClick={onSelect}>{active ? `> ${name}` : name}</button>12    </li>13  );14}15 16function Sidebar({ activeId, onSelect }) {17  return (18    <ul>19      {conversations.map((chat) => (20        <ConversationItem21          key={chat.id}22          name={chat.name}23          active={chat.id === activeId}24          onSelect={() => onSelect(chat.id)}25        />26      ))}27    </ul>28  );29}30 31function MessageInput() {32  const [draft, setDraft] = useState("");33  return (34    <input35      placeholder="Write a reply"36      value={draft}37      onChange={(event) => setDraft(event.target.value)}38    />39  );40}41 42function ChatWindow({ chat }) {43  return (44    <section>45      <h2>{chat.name}</h2>46      {chat.messages.map((text) => (47        <p key={text}>{text}</p>48      ))}49      <MessageInput />50    </section>51  );52}53 54export default function App() {55  const [activeId, setActiveId] = useState(1);56  const chat = conversations.find((item) => item.id === activeId);57  return (58    <>59      <Sidebar activeId={activeId} onSelect={setActiveId} />60      <ChatWindow chat={chat} />61    </>62  );63}

Read the tree from App down. App (lines 54 to 63) renders Sidebar and ChatWindow. Sidebar renders a ConversationItem for each conversation (lines 19 to 26), and ChatWindow renders MessageInput on line 49. The messages on lines 46 to 48 are <p> tags, so they aren't nodes. The leaves are the two ConversationItems and MessageInput.

The tree tells you where each piece of state lives. Which chat is open is kept in App (line 55), the closest node above both the sidebar, which highlights it, and the window, which shows it. The reply you're typing is kept in the leaf that needs it, MessageInput (line 32), so typing renders only that leaf.

And the reply you typed to Asha is still there after you click Ben. Switching chats gave ChatWindow new props, but MessageInput is the same node, in the same place in the tree, so React kept its state. The Preserving and resetting state lesson explains the rule and the usual fix. For a preview, press Edit & run and change line 60 to <ChatWindow key={chat.id} chat={chat} />: a different key makes React treat each conversation's window as a different node, so the draft starts empty.

Common mix-ups

• "The render tree is the DOM tree." No. The render tree holds your components; the DOM holds the elements they return, like <li>. React builds the DOM from your components.
• "One component, one node." No. A component rendered three times is three nodes, each with its own props and state.
• "The render tree is the same as the import tree." No. One has components and follows what renders; the other has files and follows imports. A component passed as children sits in different places in the two.
• "The tree is fixed when the page loads." No. Conditions and lists add and remove nodes on any render, and a removed node loses its state.
• "A state change re-renders the whole app." No. It renders the component that changed and its subtree. Above it and beside it, nothing renders.
• "Every file in my project ends up in the bundle." No. The bundler follows imports from the entry file; files nothing imports are left out.

Practice exercises

Draw the tree on paper first: App at the top, then each component tag you find in each component's JSX. Then use the hints, and press Edit & run to change the code and watch the result.

function MenuItem({ name }) {
  return <li>{name}</li>;
}

function Menu() {
  return (
    <ul>
      <MenuItem name="Green tea" />
      <MenuItem name="Black tea" />
      <MenuItem name="Mint tea" />
      <MenuItem name="Lemon cake" />
    </ul>
  );
}

function Footer() {
  return <footer>Open every day</footer>;
}

export default function App() {
  return (
    <main>
      <Menu />
      <Footer />
    </main>
  );
}

1function MenuItem({ name }) {2  return <li>{name}</li>;3}4 5function Menu() {6  return (7    <ul>8      <MenuItem name="Green tea" />9      <MenuItem name="Black tea" />10      <MenuItem name="Mint tea" />11      <MenuItem name="Lemon cake" />12    </ul>13  );14}15 16function Footer() {17  return <footer>Open every day</footer>;18}19 20export default function App() {21  return (22    <main>23      <Menu />24      <Footer />25    </main>26  );27}

1function Avatar({ name }) {2  return <strong>{name[0]}</strong>;3}4 5function UserName({ name }) {6  return <span>{name}</span>;7}8 9function Profile({ name }) {10  return (11    <div>12      <Avatar name={name} />13      <UserName name={name} />14    </div>15  );16}17 18function SignOutButton() {19  return <button>Sign out</button>;20}21 22export default function AccountBar() {23  return (24    <nav>25      <Profile name="Asha" />26      <SignOutButton />27    </nav>28  );29}

1function Avatar({ name }) {2  return <strong>{name[0]}</strong>;3}4 5function UserName({ name }) {6  return <span>{name}</span>;7}8 9function Profile({ name }) {10  return (11    <div>12      <Avatar name={name} />13      <UserName name={name} />14    </div>15  );16}17 18function SignOutButton() {19  return <button>Sign out</button>;20}21 22export default function AccountBar() {23  return (24    <nav>25      <Profile name="Asha" />26      <SignOutButton />27    </nav>28  );29}

1const products = [2  { id: 1, name: "Green tea", price: 4 },3  { id: 2, name: "Black tea", price: 3 },4  { id: 3, name: "Mint tea", price: 5 },5];6 7function ProductCard({ name, price }) {8  return <li>{name}: ${price}</li>;9}10 11export default function App() {12  return (13    <ul>14      {products.map((product) => (15        <ProductCard key={product.id} name={product.name} price={product.price} />16      ))}17    </ul>18  );19}

1const products = [2  { id: 1, name: "Green tea", price: 4 },3  { id: 2, name: "Black tea", price: 3 },4  { id: 3, name: "Mint tea", price: 5 },5];6 7function SaleBadge() {8  return <strong> Sale</strong>;9}10 11function ProductCard({ name, price }) {12  return (13    <li>14      {name}: ${price}15      {price < 4 && <SaleBadge />}16    </li>17  );18}19 20export default function App() {21  return (22    <ul>23      {products.map((product) => (24        <ProductCard key={product.id} name={product.name} price={product.price} />25      ))}26    </ul>27  );28}

1import { useState } from "react";2 3function CartPanel() {4  const [note, setNote] = useState("");5  return (6    <section>7      <h2>Your cart</h2>8      <input9        placeholder="Gift note"10        value={note}11        onChange={(event) => setNote(event.target.value)}12      />13      <p>Note: {note || "none"}</p>14    </section>15  );16}17 18export default function App() {19  const [open, setOpen] = useState(true);20  return (21    <>22      <button onClick={() => setOpen(!open)}>23        {open ? "Hide cart" : "Show cart"}24      </button>25      {open && <CartPanel />}26    </>27  );28}

1import { useState } from "react";2 3function CartPanel() {4  const [note, setNote] = useState("");5  return (6    <section>7      <h2>Your cart</h2>8      <input9        placeholder="Gift note"10        value={note}11        onChange={(event) => setNote(event.target.value)}12      />13      <p>Note: {note || "none"}</p>14    </section>15  );16}17 18export default function App() {19  const [open, setOpen] = useState(true);20  return (21    <>22      <button onClick={() => setOpen(!open)}>23        {open ? "Hide cart" : "Show cart"}24      </button>25      {open && <CartPanel />}26    </>27  );28}

1import { createRoot } from "react-dom/client";2import App from "./App.jsx";3 4createRoot(document.getElementById("root")).render(<App />);

1import { createRoot } from "react-dom/client";2import App from "./App.jsx";3 4createRoot(document.getElementById("root")).render(<App />);

1import { useState } from "react";2 3function CartPanel() {4  const [note, setNote] = useState("");5  return (6    <section>7      <h2>Your cart</h2>8      <input9        placeholder="Gift note"10        value={note}11        onChange={(event) => setNote(event.target.value)}12      />13      <p>Note: {note || "none"}</p>14    </section>15  );16}17 18export default function App() {19  const [open, setOpen] = useState(true);20  return (21    <>22      <button onClick={() => setOpen(!open)}>23        {open ? "Hide cart" : "Show cart"}24      </button>25      {open && <CartPanel />}26    </>27  );28}

1import { useState } from "react";2 3function CartPanel({ note, onNoteChange }) {4  return (5    <section>6      <h2>Your cart</h2>7      <input8        placeholder="Gift note"9        value={note}10        onChange={(event) => onNoteChange(event.target.value)}11      />12      <p>Note: {note || "none"}</p>13    </section>14  );15}16 17export default function App() {18  const [open, setOpen] = useState(true);19  const [note, setNote] = useState("");20  return (21    <>22      <button onClick={() => setOpen(!open)}>23        {open ? "Hide cart" : "Show cart"}24      </button>25      {open && <CartPanel note={note} onNoteChange={setNote} />}26    </>27  );28}

Check your understanding

For each question, draw the tree it's about. Ask whether it's the render tree (components, who renders whom) or the module tree (files, who imports whom).

Key takeaways

• React models your UI as a render tree: one node per rendered component, the root component at the top, arrows from parents to the children they render. HTML tags aren't in it.
• One component can be many nodes, like the three ProductCards, each with its own props and state.
• Top-level components sit near the root; when they render, their whole subtree renders. Leaves render no components, and render often but cheaply.
• The tree can change on every render. A component that leaves it loses its state.
• The module dependency tree has files as nodes and imports as arrows. Bundlers follow it from the entry file, and leave out what nothing imports.

Coming next: Styling components. It compares the main ways to style React components: CSS files, CSS Modules, inline styles, Tailwind, and CSS-in-JS.