Render and commit

One click, three steps, in the console

How React works: a first look walked once along the path from a click to the screen. This lesson stops at each step and looks closely, with code that prints what React is doing as it does it. Every screen update in React has three steps:

1. Trigger. Something asks React for a render: the app starting, or a set function from state.
2. Render. React calls your components to find out what the screen should show.
3. Commit. React changes the page, the DOM, where the new result differs from the last one.

After that, the browser paints: it draws the changed page on the screen. Here is a small tea order. Every component prints a line when React calls it, and the second tab, watchDom.js, prints a DOM: line for every change to the page and flashes the part that changed. Look at the console under the result, then click Add one.

1import { useState } from "react";2import "./watchDom.js";3 4function Header() {5  console.log("Render Header");6  return <h3>Tea Corner</h3>;7}8 9function QuantityPicker({ quantity, onAdd }) {10  console.log("Render QuantityPicker");11  return (12    <p>13      Green tea: <strong>{quantity}</strong>{" "}14      <button onClick={onAdd}>Add one</button>15    </p>16  );17}18 19function PriceTag({ total }) {20  console.log("Render PriceTag");21  return <p>Total: ${total}</p>;22}23 24function OrderPanel() {25  const [quantity, setQuantity] = useState(1);26  console.log("Render OrderPanel");27 28  return (29    <div>30      <QuantityPicker quantity={quantity} onAdd={() => setQuantity(quantity + 1)} />31      <PriceTag total={quantity * 4} />32    </div>33  );34}35 36export default function App() {37  console.log("Render App");38  return (39    <section>40      <Header />41      <OrderPanel />42    </section>43  );44}

OrderPanel keeps the quantity on line 25. Its children show it: QuantityPicker on lines 9 to 17 with the button, and PriceTag on lines 19 to 22 with the total. Each component's first line logs its name. Line 2 imports watchDom.js, which uses a MutationObserver, the browser's tool for watching part of a page, to print each change React makes.

When the result first appears, the console lists all five components, from Render App to Render PriceTag, each with a small 2 beside it (StrictMode calls each component twice in development; the Keeping components pure lesson explains why, and this page shows a repeated line once, with the count). Then one line: DOM: added <section>.

Now the click. The console adds Render OrderPanel, Render QuantityPicker, and Render PriceTag, and only after all three, DOM: text "1" → "2" and DOM: text "4" → "8". The number and the total flash. That's the three steps in order: the click triggered a render, React called three components, and then it committed two changes.

Step 1: something asks for a render

There are two triggers. The first is the app starting. Every React app has an entry file that hands React an element on the page and asks for the first render. Every live example in this course has one; this one shows it, with the component in the App.jsx tab.

1import { StrictMode } from "react";2import { createRoot } from "react-dom/client";3import App from "./App.jsx";4import "./watchDom.js";5 6const root = createRoot(document.getElementById("root"));7root.render(8  <StrictMode>9    <App />10  </StrictMode>,11);

Line 6 hands React the page's <div id="root">, and line 7's root.render asks for the first render of App, inside StrictMode (lines 8 to 10). Line 4 starts watching the page before that, so the console shows Render App with quantity 1, then DOM: added <p>. Press Edit & run and put // in front of lines 7 to 11: the result goes blank and the console stays empty. Nothing asked for a render.

The second trigger is a state update: calling a set function, like setQuantity. React then renders the component that owns that state. Nothing else triggers a render. Changing a variable, changing an array in place, or changing the page yourself doesn't tell React anything.

A set function doesn't render right away. It puts the new value in a queue and asks for a render, and React waits until the code that's running finishes. So several set calls make one render. This is called batching. Click Make it a gift, then Change it in a second and wait.

1import { useState } from "react";2 3export default function GiftOptions() {4  const [quantity, setQuantity] = useState(1);5  const [giftWrap, setGiftWrap] = useState(false);6  const [note, setNote] = useState("none");7  console.log(`Render: ${quantity} teas, gift wrap ${giftWrap}, note ${note}`);8 9  function makeItAGift() {10    setQuantity(2);11    setGiftWrap(true);12    setNote("Happy birthday!");13  }14 15  function changeItLater() {16    setTimeout(() => {17      setQuantity(3);18      setGiftWrap(false);19      setNote("See you soon!");20    }, 1000);21  }22 23  return (24    <div>25      <p>{quantity} teas, gift wrap: {giftWrap ? "yes" : "no"}</p>26      <p>Note: {note}</p>27      <button onClick={makeItAGift}>Make it a gift</button>28      <button onClick={changeItLater}>Change it in a second</button>29    </div>30  );31}

makeItAGift on lines 9 to 13 calls three set functions. The console adds one line, Render: 2 teas, gift wrap true, note Happy birthday!, not three: React rendered once, with all three new values. changeItLater on lines 15 to 21 does the same inside a timer, and a second later you get one line again: Render: 3 teas, gift wrap false, note See you soon!.

Batching in timers and promises is called automatic batching, and it arrived in React 18. Older React batched only inside its own event handlers, and rendered once for each set call anywhere else; you may still read about that. In React 19, updates are batched by default, wherever they come from. Batching also means the page never shows a mix, like the new quantity with the old note. The Queueing a series of state updates lesson goes further, with several updates to the same value.

Step 2: React calls your components

Rendering means React calling your component functions. On the first render it starts at the root. On a re-render it starts at the component whose state changed. Either way it goes down: when a component returns other components, React calls those, then the ones they return, until it reaches plain HTML tags. In the tea order, the click changed OrderPanel's state, so React called OrderPanel, then QuantityPicker, then PriceTag, in the order they appear in the JSX.

Two things follow. Children render with their parent, even when their props are the same as before. And components above or beside the one that changed don't render: App and Header printed nothing on the click. The Your UI as a tree lesson has a playground for this, and the memo, useMemo and useCallback lesson shows how to skip renders you don't need.

While React renders, the page doesn't change. This example reads the page from inside the component, which you should never do in real code, just to see what's on the page during the render. Click Add one twice.

1import { useState } from "react";2 3export default function App() {4  const [quantity, setQuantity] = useState(1);5  // Only for this experiment: read the page while React renders.6  const onPage = document.querySelector("strong")?.textContent ?? "nothing yet";7  console.log(`Rendering ${quantity}. The page shows: ${onPage}`);8 9  return (10    <p>11      Green tea: <strong>{quantity}</strong>{" "}12      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>13    </p>14  );15}

Line 6 finds the <strong> on the page and reads its text, or nothing yet if it isn't there. Line 7 prints it next to the quantity this render works with. The first render prints Rendering 1. The page shows: nothing yet: the paragraph isn't on the page until the first commit. The first click prints Rendering 2. The page shows: 1. React is working out the screen for 2, and the page still shows 1; the commit comes after.

That's also why React can call a component more than once without harm, as long as rendering only works things out. StrictMode does exactly that in development: it calls each component twice and keeps the second result, but commits once. Look at the overview's console again: every Render line has the 2, and every DOM: line appears once. In the main.jsx example above, press Edit & run and replace lines 7 to 11 with root.render(<App />);: the render lines lose their 2. A production build calls each component once.

The playground runs a similar order, and pauses one click at every step. Each row shows the page's paragraphs at that moment. Press Add one, then Add one as a gift.

1function QuantityPicker({ quantity }) {2  return <p>Green tea: <strong>{quantity}</strong></p>;3}4 5function PriceTag({ total }) {6  return <p>Total: ${total}</p>;7}8 9function GiftNote({ giftWrap }) {10  return <p>Gift wrap: {giftWrap ? "yes" : "no"}</p>;11}12 13function OrderPanel() {14  const [quantity, setQuantity] = useState(1);15  const [giftWrap, setGiftWrap] = useState(false);16 17  function addGift() {18    setQuantity(quantity + 1);19    setGiftWrap(true);20  }21 22  return (23    <div>24      <QuantityPicker quantity={quantity} />25      <PriceTag total={quantity * 4 + (giftWrap ? 2 : 0)} />26      <GiftNote giftWrap={giftWrap} />27      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>28      <button onClick={addGift}>Add one as a gift</button>29    </div>30  );31}32 33function App() {34  return (35    <section>36      <h3>Tea Corner</h3>37      <OrderPanel />38    </section>39  );40}

For Add one as a gift, the handler on lines 17 to 20 calls two set functions, and there is still one render pass: OrderPanel, QuantityPicker, PriceTag, GiftNote, in that order. In every render row, the page still shows the old values. The commit row is the first where the page changes, and it makes all three changes together: the quantity, the total, and the gift note. App never appears after the first render: its state didn't change.

Step 3: React changes only what differs

After the render, React commits: it applies the result to the DOM. What it does depends on the render.

• The first render. There is nothing on the page yet. React makes every DOM element the components described, puts them together off the page, and then adds the whole tree in one go. That's why the overview printed a single line, DOM: added <section>, though the section holds a heading, two paragraphs, and a button.
• A re-render. While rendering, React compared each new element with the one in the same place last time, and marked the ones that may have changed. The commit visits only those, compares their old and new props, and changes only what differs: in the overview, two text nodes. The heading, the button, and the rest of each paragraph stay the same DOM nodes. If nothing differs, the commit changes nothing.

How to read the table: each row asks one question of the first render and of a re-render.

React works out the changes by comparing its new description with its last description, not with the page. It doesn't read the DOM to decide. This experiment changes the page behind React's back, which you should never do in real code. Click Change the page by hand, then Add one.

1import { useState } from "react";2import "./watchDom.js";3 4export default function App() {5  const [quantity, setQuantity] = useState(1);6 7  function changeByHand() {8    // Only for this experiment: change React's elements yourself.9    document.querySelector("h3").style.color = "tomato";10    document.querySelector("strong").textContent = "99";11  }12 13  return (14    <div>15      <h3>Green tea</h3>16      <p>Quantity: <strong>{quantity}</strong></p>17      <button onClick={changeByHand}>Change the page by hand</button>18      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>19    </div>20  );21}

Lines 9 and 10 turn the heading tomato red and put 99 in the <strong>. The console shows those changes too: watchDom.js sees every change, React's or not. Then Add one renders App with quantity 2. Compared with the last render, only the number differs, so the commit prints DOM: text "99" → "2": React overwrote your 99 because it changes that text. The heading stays red: its description didn't change, so React never touched it. When you need the real DOM element, for focus or measuring, React gives you refs; Manipulating the DOM with refs covers them.

After the commit: the browser paints

React's work ends with the commit. Drawing the pixels is the browser's job, and React's docs call it painting, to keep it apart from React's render. The browser paints between pieces of work: while your JavaScript runs, from the click handler through the render and the commit, it can't draw. So the page never shows half an update. This price tag takes 300 milliseconds to render, on purpose. Click Add one.

1import { useState } from "react";2import "./watchDom.js";3 4function SlowPriceTag({ total }) {5  const start = performance.now();6  while (performance.now() - start < 300) {7    // Busy on purpose: this component takes 300 milliseconds to render.8  }9  return <p>Total: ${total}</p>;10}11 12export default function App() {13  const [quantity, setQuantity] = useState(1);14 15  return (16    <div>17      <p>Green tea: <strong>{quantity}</strong></p>18      <SlowPriceTag total={quantity * 4} />19      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>20    </div>21  );22}

Lines 5 to 8 keep the computer busy for 300 milliseconds each time SlowPriceTag renders, twice with StrictMode. The quantity on line 17 has nothing slow about it, yet it doesn't change first: for more than half a second nothing moves, and then the quantity and the total change in the same frame, both flashing. The commit made both changes, and the paint showed them together.

Some code needs to run after the commit, like a timer to start or a size to measure. That's what Effects are for; a layout Effect even runs right after React changes the page, before the paint. Synchronizing with effects and Layout effects and timing cover both, and the Rendering and the event loop lesson shows when browsers paint.

A coupon that never shows half an update

Checkout pages often wait for a server. Here, applying a coupon shows a message while it checks, then updates the total and the message together. Click Apply TEA10 and watch the console.

1import { useState } from "react";2import "./watchDom.js";3 4function checkCoupon(code) {5  // Stands in for a request to a server: it answers after half a second.6  return new Promise((resolve) => {7    setTimeout(() => resolve(code === "TEA10" ? 10 : 0), 500);8  });9}10 11export default function Checkout() {12  const [discount, setDiscount] = useState(0);13  const [message, setMessage] = useState("No coupon yet");14  const [checking, setChecking] = useState(false);15  console.log(`Render: ${discount}% off, checking ${checking}`);16 17  async function applyCoupon() {18    setChecking(true);19    const percent = await checkCoupon("TEA10");20    setDiscount(percent);21    setMessage(`Coupon applied: ${percent}% off`);22    setChecking(false);23  }24 25  return (26    <div>27      <p>Total: ${20 - (20 * discount) / 100}</p>28      <p>{checking ? "Checking the coupon" : message}</p>29      <button onClick={applyCoupon} disabled={checking}>Apply TEA10</button>30    </div>31  );32}

checkCoupon on lines 4 to 9 stands in for a server: a promise that answers 10 after half a second. applyCoupon on lines 17 to 23 is an async function. Line 18 sets checking, and the handler pauses at the await on line 19, so React renders right away: Render: 0% off, checking true, then the message changes to Checking the coupon and the button turns off (DOM: set disabled on <button>).

Half a second later, lines 20 to 22 call three set functions. Automatic batching makes them one render, Render: 10% off, checking false, and one commit with three changes: the total goes from 20 to 18, the message becomes Coupon applied: 10% off, and the button turns back on. The shopper never sees the new total next to Checking the coupon, or the old total next to the applied coupon.

Sort what asks React for a render, and what doesn't:

Common mix-ups

• "Rendering means changing the page." No. Rendering is React calling your components. The page changes in the commit, after the render, and only where something differs.
• "Each set call renders right away." No. A set call asks for a render. React batches the calls and renders once, after the code that's running finishes, in timers and promises too.
• "React renders the whole app on every update." No. It starts at the component whose state changed, and renders that component and everything inside it. Its parents and siblings don't render.
• "StrictMode makes React update the page twice." No. In development, it calls your components twice; the commit still happens once, and a production build calls them once.
• "React reads the page to find what changed." No. It compares the new render with the last render. That's why a change you make by hand can stay, or be overwritten, depending on what React changes next.
• "The screen shows each change as React makes it." No. The browser paints after your JavaScript finishes, so all of a commit's changes appear in the same frame.

Practice exercises

Predict first, then press Edit & run and read the console under the result. Remember StrictMode's 2: a render line with a 2 beside it is one render.

import { useState } from "react";

export default function Profile() {
  const [name, setName] = useState("Asha");
  const [city, setCity] = useState("Pune");
  const [saved, setSaved] = useState(false);
  console.log("Render Profile");

  function save() {
    setName("Asha Rao");
    setCity("Mumbai");
    setSaved(true);
  }

  return (
    <div>
      <p>{name} from {city}</p>
      <button onClick={save}>{saved ? "Saved" : "Save"}</button>
    </div>
  );
}

1import { useState } from "react";2 3export default function Profile() {4  const [name, setName] = useState("Asha");5  const [city, setCity] = useState("Pune");6  const [saved, setSaved] = useState(false);7  console.log("Render Profile");8 9  function save() {10    setName("Asha Rao");11    setCity("Mumbai");12    setSaved(true);13  }14 15  return (16    <div>17      <p>{name} from {city}</p>18      <button onClick={save}>{saved ? "Saved" : "Save"}</button>19    </div>20  );21}

import "./watchDom.js";

export default function Menu() {
  return (
    <main>
      <h3>Today's teas</h3>
      <ul>
        <li>Green tea</li>
        <li>Mint tea</li>
      </ul>
    </main>
  );
}

1import "./watchDom.js";2 3export default function Menu() {4  return (5    <main>6      <h3>Today's teas</h3>7      <ul>8        <li>Green tea</li>9        <li>Mint tea</li>10      </ul>11    </main>12  );13}

1import { useState } from "react";2 3function Header() {4  console.log("Render Header");5  return <h3>Tea Corner</h3>;6}7 8function BasketCount({ count }) {9  console.log("Render BasketCount");10  return <p>In your basket: {count}</p>;11}12 13function Basket() {14  const [count, setCount] = useState(0);15  console.log("Render Basket");16  return (17    <div>18      <BasketCount count={count} />19      <button onClick={() => setCount(count + 1)}>Add tea</button>20    </div>21  );22}23 24function Footer() {25  console.log("Render Footer");26  return <p>Open every day</p>;27}28 29export default function App() {30  console.log("Render App");31  return (32    <>33      <Header />34      <Basket />35      <Footer />36    </>37  );38}

1import { useState } from "react";2 3function Header() {4  console.log("Render Header");5  return <h3>Tea Corner</h3>;6}7 8function BasketCount({ count }) {9  console.log("Render BasketCount");10  return <p>In your basket: {count}</p>;11}12 13function Basket() {14  const [count, setCount] = useState(0);15  console.log("Render Basket");16  return (17    <div>18      <BasketCount count={count} />19      <button onClick={() => setCount(count + 1)}>Add tea</button>20    </div>21  );22}23 24function Footer() {25  console.log("Render Footer");26  return <p>Open every day</p>;27}28 29export default function App() {30  console.log("Render App");31  return (32    <>33      <Header />34      <Basket />35      <Footer />36    </>37  );38}

1import { StrictMode } from "react";2import { createRoot } from "react-dom/client";3import App from "./App.jsx";4import "./watchDom.js";5 6const root = createRoot(document.getElementById("root"));7root.render(8  <StrictMode>9    <App />10  </StrictMode>,11);

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

import { useState } from "react";

export default function App() {
  const [quantity, setQuantity] = useState(5);
  // Only for this experiment: read the page while React renders.
  const onPage = document.querySelector("strong")?.textContent ?? "nothing yet";
  console.log(`Rendering ${quantity}. The page shows: ${onPage}`);

  return (
    <p>
      Green tea: <strong>{quantity}</strong>{" "}
      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>
    </p>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [quantity, setQuantity] = useState(5);5  // Only for this experiment: read the page while React renders.6  const onPage = document.querySelector("strong")?.textContent ?? "nothing yet";7  console.log(`Rendering ${quantity}. The page shows: ${onPage}`);8 9  return (10    <p>11      Green tea: <strong>{quantity}</strong>{" "}12      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>13    </p>14  );15}

1import { useState } from "react";2import "./watchDom.js";3 4export default function Order() {5  const [teas, setTeas] = useState(["Green tea", "Mint tea"]);6  const total = teas.length * 4;7 8  return (9    <div>10      <ul>11        {teas.map((tea, index) => (12          <li key={index}>{tea}: $4 of ${total}</li>13        ))}14      </ul>15      <button onClick={() => setTeas([...teas, "Black tea"])}>Add black tea</button>16    </div>17  );18}

1import { useState } from "react";2import "./watchDom.js";3 4export default function Order() {5  const [teas, setTeas] = useState(["Green tea", "Mint tea"]);6  const total = teas.length * 4;7 8  return (9    <div>10      <ul>11        {teas.map((tea, index) => (12          <li key={index}>{tea}: $4</li>13        ))}14      </ul>15      <p>Total: ${total}</p>16      <button onClick={() => setTeas([...teas, "Black tea"])}>Add black tea</button>17    </div>18  );19}

Check your understanding

For each question, find the trigger first, then follow the render and the commit. Press Edit & run on a question's code to check your answer in its console.

Key takeaways

• Every screen update is a trigger, a render, and a commit; then the browser paints.
• Two things trigger a render: the first root.render, and set functions. Several updates in one event, timer, or promise are batched into one render.
• Rendering is React calling your components, from the one whose state changed down through everything inside it. The page doesn't change during a render.
• StrictMode calls each component twice in development, and still commits once.
• The first commit adds the whole tree at once. Later commits change only the DOM nodes that differ from the last render, and nothing when nothing differs.
• The browser paints after your JavaScript finishes, so a commit's changes appear together.

Coming next: State as a snapshot. It shows why a set call doesn't change the variable in the code that's running, and what each render's values mean for your handlers and timers.