When React re-renders

A gift note that renders the whole page

This lesson opens the Performance stage. Before you make anything faster, you need to see what React is doing, and the first thing to see is when a component renders again: when React calls your component function another time to get a new result. The Render and commit lesson showed the steps of one update; this one counts them.

Here is a tea shop with a gift note. Each component shows a small counter, from the RenderCount.jsx tab, of how many times it has rendered, and its box flashes blue each time. You don't need to read that tab to use it. Click in the box and type Hi:

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4function Header() {5  return <h3 className="box">Tea shop <RenderCount /></h3>;6}7 8function Bestsellers() {9  return <p className="box">Bestsellers: green tea, chai <RenderCount /></p>;10}11 12export default function App() {13  const [note, setNote] = useState("");14 15  return (16    <div className="box">17      <Header />18      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />19      <p>Note: {note} <RenderCount /></p>20      <Bestsellers />21    </div>22  );23}

Line 13 keeps the note in App's state, and line 18 calls setNote on every key. The counter on line 19 sits in App's own paragraph, so it counts App's renders. Header (lines 4 to 6) and Bestsellers (lines 8 to 10) have their own. They all start at renders: 1, the first render.

After Hi, all three say renders: 3. Each key changed App's state, so React rendered App, and then Header and Bestsellers, which App returns on lines 17 and 20. They rendered twice more, though they showed exactly the same text every time.

Is that a problem? Usually not. These components take a tiny fraction of a millisecond to render, and React only changes the page where the result differs. This lesson shows what makes a component render, why a render isn't a change to the page, and how to tell when a render costs enough to fix.

Three reasons a component renders

After the first render, there are exactly three reasons React calls a component again. This shop shows two of them; the gift note above showed the third. Press Like, then Add to cart twice, and watch every counter:

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const CartContext = createContext(0);5 6function CartProvider({ children }) {7  const [count, setCount] = useState(0);8  return (9    <CartContext value={count}>10      <button onClick={() => setCount(count + 1)}>Add to cart</button>11      {children}12    </CartContext>13  );14}15 16function CartBadge() {17  const count = useContext(CartContext);18  return <p className="box">Cart: {count} <RenderCount /></p>;19}20 21function LikeButton() {22  const [liked, setLiked] = useState(false);23  return (24    <button className="box" onClick={() => setLiked(!liked)}>25      {liked ? "Liked" : "Like"} <RenderCount />26    </button>27  );28}29 30function ProductCard() {31  return (32    <div className="box">33      Green tea <RenderCount />34      <LikeButton />35    </div>36  );37}38 39export default function App() {40  return (41    <CartProvider>42      <CartBadge />43      <ProductCard />44    </CartProvider>45  );46}

1. Its own state changes. LikeButton (lines 21 to 28) keeps liked on line 22. Like changes it, and only LikeButton's counter goes up. ProductCard, its parent, stays at 1: a render goes down from the component whose state changed, never up.
2. Its parent renders. That's the gift note: App rendered, so everything it returned rendered.
3. A context it reads changes. CartProvider (lines 6 to 14) keeps the count on line 7 and provides it on line 9. CartBadge reads it with useContext on line 17, so after each Add to cart, CartBadge renders: renders: 3 after two clicks.

Look at ProductCard and LikeButton after Add to cart: still the same. CartProvider rendered, but it shows its children on line 11, and those elements were made by App on lines 42 and 43. App didn't render, so they're the same elements as last time, and React skips them. Only components that read the context render because of it, as the context lesson showed. (If you want to see the check React makes to skip them, the Reconciliation and the diffing algorithm lesson, in the Under the hood stage, reads it in React's code.)

How to read the table: each row is something that happens, what renders because of it, and where you can see it. The last row is the one exception, coming up in the next section.

The playground puts all of this in one shop, like React DevTools would show it. Every box is a component. Type in the note, press Add to cart, and star a tea, then switch where the note's state lives:

function ShopPage() {
  const [note, setNote] = useState("");
  return (
    <>
      <Header />
      <GiftNote note={note} onChange={setNote} />
      <CartProvider>
        <CartBadge />
        <ProductList />
      </CartProvider>
    </>
  );
}

With the note's state in ShopPage, one key renders all nine components, for one change on the page: the note. Move the state into GiftNote and the same key renders one. Add to cart renders CartProvider and CartBadge, and a star renders only its row. Clear note on an empty note renders nothing, which is the exception the next section explains.

The same props don't stop a render

It's natural to think a child renders only when its props change. It doesn't work that way. Here ShippingNote gets the same prop every time. Press Add one a few times:

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4function ShippingNote({ country }) {5  return <p className="box">Ships to {country} <RenderCount /></p>;6}7 8export default function App() {9  const [quantity, setQuantity] = useState(1);10 11  return (12    <div className="box">13      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>14      <button onClick={() => setQuantity(quantity)}>Set the same quantity</button>15      <p>Green tea × {quantity} <RenderCount /></p>16      <ShippingNote country="India" />17    </div>18  );19}

Line 16 passes country="India", the same string on every render. Still, every Add one (line 13) makes ShippingNote's counter go up with App's. When a parent renders, React renders its children without comparing their props one by one. That's on purpose: most renders are cheap, and comparing every prop of every component would take time too.

You can ask React to compare: memo wraps a component so it skips the render when every prop is the same as last time. Press Edit & run, change line 1 to import { memo, useState } from "react";, line 4 to const ShippingNote = memo(function ShippingNote({ country }) {, and line 6 to });. Now Add one leaves ShippingNote at renders: 1. The next lesson, memo, useMemo and useCallback, covers memo and why it often doesn't help, and the React Compiler adds it for you.

State is different. Press Set the same quantity (line 14): it sets quantity to the value it already has, and nothing renders. Before React renders for a state change, it compares the new state with the old one using Object.is, and skips the render when they're the same. (Rarely, React calls the component once before it notices, but it still skips the children. The What setState really does lesson, in the Under the hood stage, shows why.) That's why you must make a new object or array to update state, as Updating objects in state explains: a changed object that is the same object looks unchanged.

A render is not a change to the page

A render only means React called your function. What reaches the page is decided after, in the commit. This example adds a second tab, watchDom.js: it prints a DOM: line in the console for every change React makes to the page, and shades the element around it orange, while the counters still flash blue. Press Add one:

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3import "./watchDom.js";4 5function Header() {6  return <h3 className="box">Tea shop <RenderCount /></h3>;7}8 9function Price({ quantity }) {10  return <p className="box">Total: ${quantity * 4} <RenderCount /></p>;11}12 13function Delivery() {14  return <p className="box">Free delivery over $20 <RenderCount /></p>;15}16 17export default function App() {18  const [quantity, setQuantity] = useState(1);19 20  return (21    <div className="box">22      <Header />23      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>24      <Price quantity={quantity} />25      <Delivery />26      <RenderCount />27    </div>28  );29}

Line 3 imports watchDom.js. Line 18 keeps the quantity, and line 23's button adds one. Four counters go up: App's on line 26, and Header, Price, and Delivery, which App returns on lines 22, 24, and 25. Four boxes flash blue. But the console adds one line, DOM: text "4" → "8", and only the total's paragraph, which holds that text, turns orange. (The line before it, DOM: added <div>, is the first render putting the page in place.)

React compared each component's new result with its last one. Header and Delivery returned the same elements, so React left their DOM alone. In Price (line 10), only the number differs, so React changed that one text node, not even the whole paragraph.

How to read the table: each row asks one question of the render and of the commit.

When a render costs something

A render costs the time your component takes to run. For most components that's a few microseconds, and a few extra renders don't matter. It matters when two things meet: a component that is slow to render, and a render that happens often, like on every key. Here the product list is slow on purpose: lines 5 to 8 of the SlowProductList.jsx tab wait 100 milliseconds in a loop, like a list with a lot to draw. Type Happy birthday quickly:

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3import SlowProductList from "./SlowProductList.jsx";4 5export default function App() {6  const [note, setNote] = useState("");7 8  return (9    <div className="box">10      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />11      <p>Note: {note} <RenderCount /></p>12      <SlowProductList />13    </div>14  );15}

The letters fall behind your fingers and arrive in jumps. Line 6 keeps the note in App, and line 12 renders SlowProductList as a child, so every key renders the list, and the list's counter climbs with every letter. The box can't show your key until the render ends, 100 ms later, and 200 ms in development, where StrictMode renders every component twice.

A screen that shows 60 frames a second draws a new frame about every 16 milliseconds. A render that takes longer holds the screen for several frames, and that's when people feel it. So before you fix a render, measure it: performance.now() around the slow part (the Measuring performance lesson shows how), or the React DevTools Profiler, which the Profiling React apps lesson covers. A render that takes a millisecond can run on every key without anyone noticing.

There are a few ways to fix a slow render like this one. The simplest is in the practical section: move the state so the slow part doesn't render at all. Another is useDeferredValue, which lets the slow part lag behind while the box stays fast.

See renders with React DevTools

The counters in this lesson are a stand-in for a tool you can use on any React app: React Developer Tools, a free browser extension from the React team for Chrome, Firefox, and Edge. It works on your own app, like the one from Setting up a React project. To see renders:

1. Install React Developer Tools and open your app in development.
2. Open the browser's developer tools and choose the Components tab.
3. Click the gear icon for its settings, and in General, turn on Highlight updates when components render.
4. Use your app. A colored outline flashes around each component that renders.

The outlines are renders, not changes to the page, exactly like the blue flashes here. When one component renders many times in a short time, its outline's color moves from teal toward yellow, so a component that renders on every key stands out. The colors are a list in canvas.js in React's DevTools code. The Profiler tab goes further: it records renders, how long each took, and, with "Record why each component rendered while profiling" turned on in its settings, why.

Moving state down to fix a slow page

The slow page had a simple cause: the note's state lived in App, above the slow list, so every key rendered the list. Only the text box and the note need that state. Move it down into a component of their own:

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3import SlowProductList from "./SlowProductList.jsx";4 5function GiftNote() {6  const [note, setNote] = useState("");7 8  return (9    <>10      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />11      <p>Note: {note} <RenderCount /></p>12    </>13  );14}15 16export default function App() {17  return (18    <div className="box">19      <GiftNote />20      <SlowProductList />21    </div>22  );23}

GiftNote on lines 5 to 14 now keeps the note (line 6) and shows the box and the note. App on lines 16 to 23 has no state at all, so typing renders GiftNote and nothing else. Type Happy birthday again: the letters keep up, and the list's counter stays at renders: 1. No memo, no measuring, only a better place for the state.

Three more fixes come from the same idea, keeping the slow part out of the render:

• Pass content as children. A component with state that wraps other content, like CartProvider, can take it as children. The children are made by the parent, so the wrapper's state changes don't render them. Exercise 4 practices it.
• Read context as low as you can. If only one line of a slow component needs a context, put that line in a small component of its own. Exercise 5 practices it.
• Skip the render. When moving things isn't possible, memo skips a component whose props didn't change, and the React Compiler does it for you. memo, useMemo and useCallback and The React Compiler come next.

Common mix-ups

• "A re-render means React rebuilt the page." No. It means React called your function. The page changes only where the new result differs, often in one text or nowhere.
• "If the props didn't change, the child won't render." No. A parent's render renders its children whatever their props, unless the child is wrapped in memo.
• "Every extra render is a bug to remove." No. Renders are how React works, and most are cheap. Fix the ones you can feel, after measuring.
• "Only the component that called the set function renders." No. Everything it returns renders too, all the way down.
• "Setting state always causes a render." No. Setting it to the value it already has (by Object.is) renders nothing.
• "StrictMode's double renders show a performance problem." No. They happen only in development, to catch impure components. A production build renders once.

Practice exercises

Read the counters in each result. Try a guess first, then press Edit & run and check, and use the hints if you're stuck.

import { useState } from "react";
import RenderCount from "./RenderCount.jsx";

function Header() {
  return <h3 className="box">Tea shop <RenderCount /></h3>;
}

function Price({ quantity }) {
  return <p className="box">Total: ${quantity * 4} <RenderCount /></p>;
}

function Delivery() {
  return <p className="box">Free delivery over $20 <RenderCount /></p>;
}

export default function App() {
  const [quantity, setQuantity] = useState(1);

  return (
    <div className="box">
      <Header />
      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>
      <Price quantity={quantity} />
      <Delivery />
      <RenderCount />
    </div>
  );
}

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4function Header() {5  return <h3 className="box">Tea shop <RenderCount /></h3>;6}7 8function Price({ quantity }) {9  return <p className="box">Total: ${quantity * 4} <RenderCount /></p>;10}11 12function Delivery() {13  return <p className="box">Free delivery over $20 <RenderCount /></p>;14}15 16export default function App() {17  const [quantity, setQuantity] = useState(1);18 19  return (20    <div className="box">21      <Header />22      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>23      <Price quantity={quantity} />24      <Delivery />25      <RenderCount />26    </div>27  );28}

import { useState } from "react";
import RenderCount from "./RenderCount.jsx";

function Price({ quantity }) {
  return <p className="box">Total: ${quantity * 4} <RenderCount /></p>;
}

export default function App() {
  const [quantity, setQuantity] = useState(1);

  return (
    <div className="box">
      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>
      <button onClick={() => setQuantity(1)}>Reset</button>
      <Price quantity={quantity} />
    </div>
  );
}

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4function Price({ quantity }) {5  return <p className="box">Total: ${quantity * 4} <RenderCount /></p>;6}7 8export default function App() {9  const [quantity, setQuantity] = useState(1);10 11  return (12    <div className="box">13      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>14      <button onClick={() => setQuantity(1)}>Reset</button>15      <Price quantity={quantity} />16    </div>17  );18}

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3import SlowProductList from "./SlowProductList.jsx";4 5export default function App() {6  const [note, setNote] = useState("");7 8  return (9    <div className="box">10      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />11      <p>Note: {note} <RenderCount /></p>12      <SlowProductList />13    </div>14  );15}

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3import SlowProductList from "./SlowProductList.jsx";4 5function GiftNote() {6  const [note, setNote] = useState("");7 8  return (9    <>10      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />11      <p>Note: {note} <RenderCount /></p>12    </>13  );14}15 16export default function App() {17  return (18    <div className="box">19      <GiftNote />20      <SlowProductList />21    </div>22  );23}

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const CartContext = createContext(0);5 6function CartBadge() {7  const count = useContext(CartContext);8  return <p className="box">Cart: {count} <RenderCount /></p>;9}10 11function ProductList() {12  return <p className="box">Green tea, chai, mint tea <RenderCount /></p>;13}14 15function CartProvider() {16  const [count, setCount] = useState(0);17  return (18    <CartContext value={count}>19      <button onClick={() => setCount(count + 1)}>Add to cart</button>20      <CartBadge />21      <ProductList />22    </CartContext>23  );24}25 26export default function App() {27  return <CartProvider />;28}

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const CartContext = createContext(0);5 6function CartBadge() {7  const count = useContext(CartContext);8  return <p className="box">Cart: {count} <RenderCount /></p>;9}10 11function ProductList() {12  return <p className="box">Green tea, chai, mint tea <RenderCount /></p>;13}14 15function CartProvider({ children }) {16  const [count, setCount] = useState(0);17  return (18    <CartContext value={count}>19      <button onClick={() => setCount(count + 1)}>Add to cart</button>20      {children}21    </CartContext>22  );23}24 25export default function App() {26  return (27    <CartProvider>28      <CartBadge />29      <ProductList />30    </CartProvider>31  );32}

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const CartContext = createContext(0);5 6function CartProvider({ children }) {7  const [count, setCount] = useState(0);8  return (9    <CartContext value={count}>10      <button onClick={() => setCount(count + 1)}>Add to cart</button>11      {children}12    </CartContext>13  );14}15 16function SlowProductList() {17  const count = useContext(CartContext);18  const start = performance.now();19  while (performance.now() - start < 100) {20    // Pretend this list has a lot to draw.21  }22  return (23    <div className="box">24      200 teas <RenderCount />25      <p>In your cart: {count}</p>26    </div>27  );28}29 30export default function App() {31  return (32    <CartProvider>33      <SlowProductList />34    </CartProvider>35  );36}

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const CartContext = createContext(0);5 6function CartProvider({ children }) {7  const [count, setCount] = useState(0);8  return (9    <CartContext value={count}>10      <button onClick={() => setCount(count + 1)}>Add to cart</button>11      {children}12    </CartContext>13  );14}15 16function InCart() {17  const count = useContext(CartContext);18  return <p>In your cart: {count}</p>;19}20 21function SlowProductList() {22  const start = performance.now();23  while (performance.now() - start < 100) {24    // Pretend this list has a lot to draw.25  }26  return (27    <div className="box">28      200 teas <RenderCount />29      <InCart />30    </div>31  );32}33 34export default function App() {35  return (36    <CartProvider>37      <SlowProductList />38    </CartProvider>39  );40}

1import { useEffect, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4function ProductList() {5  return <p className="box">Green tea, chai, mint tea <RenderCount /></p>;6}7 8export default function App() {9  const [seconds, setSeconds] = useState(0);10 11  useEffect(() => {12    const id = setInterval(() => setSeconds((value) => value + 1), 1000);13    return () => clearInterval(id);14  }, []);15 16  return (17    <div className="box">18      <p>Sale ends in {60 - seconds} seconds</p>19      <ProductList />20    </div>21  );22}

1import { useEffect, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4function ProductList() {5  return <p className="box">Green tea, chai, mint tea <RenderCount /></p>;6}7 8function SaleClock() {9  const [seconds, setSeconds] = useState(0);10 11  useEffect(() => {12    const id = setInterval(() => setSeconds((value) => value + 1), 1000);13    return () => clearInterval(id);14  }, []);15 16  return <p>Sale ends in {60 - seconds} seconds</p>;17}18 19export default function App() {20  return (21    <div className="box">22      <SaleClock />23      <ProductList />24    </div>25  );26}

Check your understanding

For each question, find where the state lives, then follow the render down from there. Remember that a render and a change to the page are two different things.

Key takeaways

• A component renders again when its own state changes, when its parent renders, or when a context it reads changes.
• A render goes down from the component that changed: everything it returns renders, even with the same props, unless it's wrapped in memo.
• Setting state to the value it already has renders nothing. Children passed in from a parent that didn't render are skipped.
• A render calls your function; the commit changes the page only where the result differs. Many renders can end in one change, or none.
• Most renders are cheap. Measure, find the slow ones that run often, and fix them first by moving state down, passing children, or reading context lower.
• React DevTools' Highlight updates outlines renders; Chrome's Paint flashing shows what was drawn again.

Coming next: memo, useMemo and useCallback. It shows how to skip a render whose inputs didn't change, and why that often doesn't help.