How React works: a first look

From a click to the screen

In Why React? you saw how React splits the work: you describe what the screen should show for your data, and React keeps the page matching. This lesson is a first look at how React does its part: what happens between a click and the new screen. Later lessons go deep into each step; here you see the whole path once.

Here is the smallest update there is. Click Add tea a few times.

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  return (7    <>8      <p>9        Items in cart: <strong>{count}</strong>10      </p>11      <button onClick={() => setCount(count + 1)}>Add tea</button>12    </>13  );14}

Line 4 gives App a piece of state, count, starting at 0. Lines 8 to 10 describe the paragraph, with the count inside a <strong>. Line 11's button calls setCount(count + 1). Each click raises the number, and nothing else on the page moves. Behind that one number, five things happen:

1. Trigger. setCount(1) tells React the state changed and asks for a new render.
2. Render. React calls your App function again. It returns a new description of the screen, where the <strong> holds 1.
3. Diff. React compares the new description with the one from the last render. Only the number differs: 0 became 1.
4. Commit. React changes the page, the DOM, to match: it sets the text inside the <strong> to 1, and leaves the paragraph's other text and the button alone.
5. Paint. The browser draws the changed page on the screen.

Steps 2 and 3 happen together: React compares while it renders. So React's docs count the diff as part of the render, and so does the rest of this lesson. That leaves four steps: trigger, render, commit, and paint.

Components return a description, not the page

A component never touches the page. It returns elements: small objects that describe what should be there. You can look at them, because they are ordinary JavaScript values:

1function ProductRow({ name, quantity }) {2  return (3    <li className="row">4      {name} × {quantity}5    </li>6  );7}8 9const row = <ProductRow name="Tea" quantity={2} />;10const item = <li className="row">Tea × 2</li>;11 12export default function App() {13  return (14    <>15      <pre>{JSON.stringify({ type: typeof row.type, props: row.props }, null, 2)}</pre>16      <pre>{JSON.stringify({ type: item.type, props: item.props }, null, 2)}</pre>17      <ul>{row}</ul>18    </>19  );20}

Line 9 writes <ProductRow name="Tea" quantity={2} /> and keeps the result in row. Line 15 prints what kind of value its type is, and its props. It prints "function", because an element for your own component holds the component function itself. The props are { "name": "Tea", "quantity": 2 }. Nothing has run ProductRow yet.

Line 10 makes an element for an HTML tag. Line 16 prints it: its type is the string "li", and its props hold the className and the text, as children. It's a description of a list item, not a list item: it isn't on the page.

Line 17 puts row in a list. That's when React uses it: it calls ProductRow with those props, gets back an <li> element like line 10's, and the commit creates a real <li>, the Tea × 2 under the printed objects. Press Edit & run and change the text on line 10 to Cake × 3: only the second printout changes, because that element is never put on the page.

Before the code runs, a build tool turns each JSX tag into a call to React's jsx function, which builds these objects; the Writing markup with JSX lesson shows it. Elements are cheap: every render makes new ones and throws the old ones away. React keeps its own record of what it put on the page, and Fiber: React's unit of work, in the last stage of the course, opens it up.

Render: React calls your components

In React, rendering means React calling your components to find out what to show. Two things trigger a render. The first is the app starting: the file that starts every React app calls root.render once.

import { createRoot } from "react-dom/client";
import App from "./App.jsx";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

Line 4 hands React the page's empty <div id="root">, and line 5 asks for the first render of App. (Every live example on this page has a file like this; Pop out shows it.) The second trigger is a state update: calling a set function from useState, like setCount. Changing an ordinary variable doesn't trigger anything; React only hears about changes through set functions.

Which components does React call? The one whose state changed, and then every component inside it. Here is a cart made of four kinds of component. Click Add tea:

1import { useState } from "react";2 3function Header({ count }) {4  return <p>Items: {count}</p>;5}6 7function ProductRow({ name, quantity }) {8  return (9    <li>10      {name} × {quantity}11    </li>12  );13}14 15function Total({ amount }) {16  return <p>Total: ${amount}</p>;17}18 19const startItems = [20  { name: "Tea", price: 3, quantity: 1 },21  { name: "Cake", price: 4, quantity: 1 },22  { name: "Lemonade", price: 2, quantity: 2 },23];24 25export default function App() {26  const [items, setItems] = useState(startItems);27  const count = items.reduce((sum, item) => sum + item.quantity, 0);28  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);29 30  function addTea() {31    setItems(32      items.map((item) =>33        item.name === "Tea" ? { ...item, quantity: item.quantity + 1 } : item,34      ),35    );36  }37 38  return (39    <>40      <Header count={count} />41      <ul>42        {items.map((item) => (43          <ProductRow key={item.name} name={item.name} quantity={item.quantity} />44        ))}45      </ul>46      <Total amount={total} />47      <button onClick={addTea}>Add tea</button>48      <button onClick={() => setItems([...items])}>Same cart again</button>49      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>50    </>51  );52}

Lines 3 to 17 are three small components that only show their props: Header, ProductRow, and Total. App keeps the cart in state on line 26 and works out the count and the total on lines 27 and 28. addTea on lines 30 to 36 makes a new array where Tea has one more, with map and spread from The JavaScript you need for React. Lines 40 to 46 describe the cart with the three components, and lines 47 to 49 are the buttons.

After Add tea, the page shows Items: 5, Tea × 2, and Total: $14. Here's the render behind it. App's state changed, so React calls App. App returns elements for Header, three ProductRows, and Total, so React calls each of them too: six calls in all. Even the Cake row renders, though its props are exactly the same as before. That's normal and usually cheap; the Performance stage shows when it matters, and how memo and the React Compiler skip such calls.

Rendering should only calculate. A component reads its props and state and returns elements; it shouldn't change anything outside itself, like a variable other code reads, or the page. In development, StrictMode calls each component a second time on purpose, to catch components that do. If a click calls several set functions, React waits until your handler finishes and renders once. The Keeping components pure and Render and commit lessons cover these rules in full.

Commit: only the differences reach the DOM

While rendering, React compares each new element with the one in the same place last time. By the end of the render it knows exactly what differs. The commit is when React applies those differences to the DOM, all together. On the very first render there is nothing to compare with, so the commit adds every element to the page.

The playground runs the cart from above, and shows the two steps apart. On the right, Render lists every component React called for your last click, and Commit lists every change it made to the DOM, as a MutationObserver (the browser's tool for watching a part of the page) saw it. On the left, each changed part of the page flashes. Press Add tea, then Same cart again, then Remove last.

Add tea renders six components and makes three DOM changes: Items: 5, Tea × 2, and Total: $14. Same cart again calls setItems([...items]): a new array with the same items. That's new state, so React renders all six components again, but every new element matches the old one, and the commit changes nothing. Nothing flashes. Remove last renders five components, one row fewer, and makes three changes: the count, the removed Lemonade <li>, and the total.

Same cart again is the clearest proof that render and commit are different steps: a component can render as often as React likes, and the page changes only where the description changed.

Paint: the browser draws the result

React's work ends with the commit. Drawing pixels is the browser's job: when the JavaScript running now finishes, the browser works out the layout and paints the next frame. React's docs say "paint" for this, to keep it apart from React's render. Because the commit makes all its changes before the browser gets its turn, the frame shows them together; you never see the count updated and the total not. The Rendering and the event loop lesson shows when browsers paint.

Each row is one step of an update, who does it, and what happens:

One thing follows from the order. Inside a click handler, after setCount(count + 1), the page still shows the old number: the render and the commit come after your handler finishes. Exercise 4 lets you see it.

Where the rest of the course goes deeper

Every later stage of the course fills in part of this picture:

• Describing the UI: what goes into the description. Components, JSX, props, conditions, and lists, and why rendering must stay pure.
• Adding interactivity: the triggers. Events, state, render and commit in detail, and why each render sees a fixed snapshot of state.
• Managing state: how React matches old and new elements by their place in the tree, and when it keeps or resets state.
• Refs, effects and custom hooks: code that runs after the commit, and reaching the real DOM nodes.
• Performance: when components render again, and how to skip renders you don't need.
• Under the hood: the same steps in React's own source code: elements, fibers, the work loop, reconciliation, and the commit phase.

Why the note you typed survives

Render and commit explain things you see every day. Type gift wrap in the box below, then click Check stock a few times.

1import { useState } from "react";2 3export default function App() {4  const [checks, setChecks] = useState(0);5 6  return (7    <>8      <p>Green tea: checked {checks} times</p>9      <input placeholder="Note for the shop" />10      <button onClick={() => setChecks(checks + 1)}>Check stock</button>11    </>12  );13}

The count goes up, and your note stays. Each click triggers a render of App. The new description still has an <input> on line 9, in the same place, with the same props. So React keeps the DOM element it made the first time: it doesn't replace it or touch its value, and the text you typed stays in it. On the page, only the number on line 8 changes.

If the description put a different kind of element in that place, React would remove the old one and create a new one, and your text would go with it. Exercise 3 shows that bug, and the Preserving and resetting state lesson explains how React decides what to keep.

Common mix-ups

• "Rendering means updating the page." No. Rendering is React calling your components. The page changes in the commit, and only where something differs. Same cart again rendered six components and changed nothing.
• "React rebuilds the whole page, or the whole list, on every change." No. The commit touches only the nodes that differ. Add tea changed three text nodes and left the other rows alone.
• "Only the component whose props changed renders." No. When a component renders, every component inside it renders too, unless you skip it on purpose with memo or the React Compiler does.
• "The screen changes as soon as I call setCount." No. A set function asks for a render. React renders and commits after your event handler finishes, and the browser paints after that.
• "The virtual DOM is a copy of the page that React draws." Not quite. "Virtual DOM" is a nickname for the descriptions React compares; React's own docs don't use it. React compares elements, then changes the real DOM, and the browser draws it.
• "A component is the thing on the page." No. A component is a function. It returns elements, and the commit turns them into DOM nodes.

Practice exercises

Predict first, then check: press Edit & run to change the code, and use the playground above to watch renders and DOM changes.

1import { useState } from "react";2 3function Header() {4  return <h3>Tea shop</h3>;5}6 7function CartLine({ name }) {8  return <li>{name}</li>;9}10 11function Cart() {12  const [count, setCount] = useState(0);13  return (14    <>15      <p>Items: {count}</p>16      <button onClick={() => setCount(count + 1)}>Add</button>17      <ul>18        <CartLine name="Tea" />19        <CartLine name="Cake" />20      </ul>21    </>22  );23}24 25export default function App() {26  return (27    <>28      <Header />29      <Cart />30    </>31  );32}

1import { useState } from "react";2 3function Header() {4  return <h3>Tea shop</h3>;5}6 7function CartLine({ name }) {8  return <li>{name}</li>;9}10 11function Cart() {12  const [count, setCount] = useState(0);13  return (14    <>15      <p>Items: {count}</p>16      <button onClick={() => setCount(count + 1)}>Add</button>17      <ul>18        <CartLine name="Tea" />19        <CartLine name="Cake" />20      </ul>21    </>22  );23}24 25export default function App() {26  return (27    <>28      <Header />29      <Cart />30    </>31  );32}

1import { useState } from "react";2 3export default function App() {4  const [points, setPoints] = useState(0);5 6  return (7    <>8      <h3>Asha</h3>9      <p>Member since 2021</p>10      <p>Points: {points}</p>11      <button onClick={() => setPoints(points + 10)}>Add 10 points</button>12    </>13  );14}

1import { useState } from "react";2 3export default function App() {4  const [points, setPoints] = useState(0);5 6  return (7    <>8      <h3>Asha</h3>9      <p>Member since 2021</p>10      <p>Points: {points}</p>11      <button onClick={() => setPoints(points + 10)}>Add 10 points</button>12    </>13  );14}

1import { useState } from "react";2 3export default function App() {4  const [checks, setChecks] = useState(0);5 6  return (7    <>8      <p>Checked {checks} times</p>9      {checks % 2 === 0 ? (10        <div>11          <input placeholder="Note" />12        </div>13      ) : (14        <section>15          <input placeholder="Note" />16        </section>17      )}18      <button onClick={() => setChecks(checks + 1)}>Check stock</button>19    </>20  );21}

1import { useState } from "react";2 3export default function App() {4  const [checks, setChecks] = useState(0);5 6  return (7    <>8      <p>Checked {checks} times</p>9      <div>10        <input placeholder="Note" />11      </div>12      <button onClick={() => setChecks(checks + 1)}>Check stock</button>13    </>14  );15}

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  function handleClick() {7    setCount(count + 1);8    console.log("On the page:", document.querySelector("strong").textContent);9  }10 11  return (12    <>13      <p>14        Items in cart: <strong>{count}</strong>15      </p>16      <button onClick={handleClick}>Add tea</button>17    </>18  );19}

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  function handleClick() {7    setCount(count + 1);8    console.log("On the page:", document.querySelector("strong").textContent);9  }10 11  return (12    <>13      <p>14        Items in cart: <strong>{count}</strong>15      </p>16      <button onClick={handleClick}>Add tea</button>17    </>18  );19}

1import { useState } from "react";2 3function ProductGrid() {4  return (5    <ul>6      <li>Green tea</li>7      <li>Lemon cake</li>8      <li>Iced tea</li>9    </ul>10  );11}12 13function Footer() {14  return <p>Free delivery over $20</p>;15}16 17export default function App() {18  const [query, setQuery] = useState("");19 20  return (21    <>22      <input23        placeholder="Search"24        value={query}25        onChange={(event) => setQuery(event.target.value)}26      />27      <p>Searching for: {query}</p>28      <ProductGrid />29      <Footer />30    </>31  );32}

1import { useState } from "react";2 3function SearchBox() {4  const [query, setQuery] = useState("");5 6  return (7    <>8      <input9        placeholder="Search"10        value={query}11        onChange={(event) => setQuery(event.target.value)}12      />13      <p>Searching for: {query}</p>14    </>15  );16}17 18function ProductGrid() {19  return (20    <ul>21      <li>Green tea</li>22      <li>Lemon cake</li>23      <li>Iced tea</li>24    </ul>25  );26}27 28function Footer() {29  return <p>Free delivery over $20</p>;30}31 32export default function App() {33  return (34    <>35      <SearchBox />36      <ProductGrid />37      <Footer />38    </>39  );40}

1import { useState } from "react";2 3function Header({ count }) {4  return <p>Items: {count}</p>;5}6 7function ProductRow({ name, quantity }) {8  return (9    <li>10      {name} × {quantity}11    </li>12  );13}14 15function Total({ amount }) {16  return <p>Total: ${amount}</p>;17}18 19const startItems = [20  { name: "Tea", price: 3, quantity: 1 },21  { name: "Cake", price: 4, quantity: 1 },22  { name: "Lemonade", price: 2, quantity: 2 },23];24 25export default function App() {26  const [items, setItems] = useState(startItems);27  const count = items.reduce((sum, item) => sum + item.quantity, 0);28  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);29 30  function addTea() {31    setItems(32      items.map((item) =>33        item.name === "Tea" ? { ...item, quantity: item.quantity + 1 } : item,34      ),35    );36  }37 38  return (39    <>40      <Header count={count} />41      <ul>42        {items.map((item) => (43          <ProductRow key={item.name} name={item.name} quantity={item.quantity} />44        ))}45      </ul>46      <Total amount={total} />47      <button onClick={addTea}>Add tea</button>48      <button onClick={() => setItems([...items])}>Same cart again</button>49      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>50    </>51  );52}

1import { useState } from "react";2 3function Header({ count }) {4  return <p>Items: {count}</p>;5}6 7function ProductRow({ name, quantity }) {8  return (9    <li>10      {name} × {quantity}11    </li>12  );13}14 15function Total({ amount }) {16  return <p>Total: ${amount}</p>;17}18 19const startItems = [20  { name: "Tea", price: 3, quantity: 1 },21  { name: "Cake", price: 4, quantity: 1 },22  { name: "Lemonade", price: 2, quantity: 2 },23];24 25export default function App() {26  const [items, setItems] = useState(startItems);27  const count = items.reduce((sum, item) => sum + item.quantity, 0);28  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);29 30  function addTea() {31    setItems(32      items.map((item) =>33        item.name === "Tea" ? { ...item, quantity: item.quantity + 1 } : item,34      ),35    );36  }37 38  return (39    <>40      <Header count={count} />41      <ul>42        {items.map((item) => (43          <ProductRow key={item.name} name={item.name} quantity={item.quantity} />44        ))}45      </ul>46      <Total amount={total} />47      <button onClick={addTea}>Add tea</button>48      <button onClick={() => setItems([...items])}>Same cart again</button>49      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>50      <button onClick={() => setItems([])}>Clear</button>51    </>52  );53}

Check your understanding

For each question, ask which step it's about: the trigger, the render, the commit, or the paint.

Key takeaways

• An update has four steps: a trigger (a set function, or the first root.render), a render, a commit, and a paint.
• Components return elements: plain objects with a type and props that describe the screen. They aren't on the page.
• Rendering is React calling your components: the one whose state changed, and every component inside it. It only calculates.
• React compares the new elements with the last ones, and the commit changes only the DOM nodes that differ.
• A render can change nothing on the page. Then the commit has nothing to do.
• The browser paints after the commit, so the screen never shows half an update.

Coming next: Setting up a React project. It starts a real project on your computer, with the main.jsx and StrictMode you met here, and React DevTools.