Keeping components pure

A numbered cart that counts wrong

A checkout page often numbers the lines in your cart: 1, 2, 3. Here is a first try. Each CartLine adds 1 to a counter and shows the new number. Read it, and guess what the result will show before you look:

1let lineNumber = 0;2 3function CartLine({ name }) {4  lineNumber = lineNumber + 1;5  return <li>{lineNumber}. {name}</li>;6}7 8export default function App() {9  return (10    <ul>11      <CartLine name="Tea" />12      <CartLine name="Cake" />13      <CartLine name="Lemonade" />14    </ul>15  );16}

Line 1 makes a variable, lineNumber, outside every component. Line 4 adds 1 to it each time React calls CartLine, and line 5 shows it next to the name. App uses CartLine three times, on lines 11 to 13. You probably expected 1, 2, 3. The result shows 2. Tea, 4. Cake, and 6. Lemonade.

Nothing is wrong with React. Every live example on this page runs inside <StrictMode>, like a new project does (you met it in Setting up a React project). In development, StrictMode calls each component twice on purpose. Each call of CartLine adds 1 to the same lineNumber, so the numbers jump by two. StrictMode didn't make the bug; it made you see it. The bug is line 4: while React renders CartLine, it changes something that existed before the call.

Here is the cart written so that every call only reads its own inputs:

1function CartLine({ number, name }) {2  return <li>{number}. {name}</li>;3}4 5export default function App() {6  return (7    <ul>8      <CartLine number={1} name="Tea" />9      <CartLine number={2} name="Cake" />10      <CartLine number={3} name="Lemonade" />11    </ul>12  );13}

Line 1 takes the number as a prop, beside the name, and line 2 shows it. Lines 8 to 10 give each line its number. There is no variable outside the component any more, so it doesn't matter how many times React calls CartLine: the result is always 1, 2, 3. Components like this one are called pure.

What makes a function pure

Purity is a JavaScript idea before it's a React one (the Pure functions lesson covers it in full). A function is pure when two things are true:

• It minds its own business. It changes no variable or object that existed before it was called.
• The same inputs give the same output. Call it with the same arguments, and it returns the same result, every time.

Here are two functions for a cart. One is pure and one isn't. Press Edit & run to see what they print:

function lineTotal(price, quantity) {
  return price * quantity;
}

let cartTotal = 0;

function addToCart(price, quantity) {
  cartTotal = cartTotal + price * quantity;
  return cartTotal;
}

console.log(lineTotal(3, 2));
console.log(lineTotal(3, 2));
console.log(addToCart(3, 2));
console.log(addToCart(3, 2));

lineTotal (lines 1 to 3) only multiplies its two arguments, so lines 12 and 13 both print 6. addToCart (lines 7 to 10) also changes cartTotal, a variable made on line 5, outside the function. That's called a side effect: anything a function does besides working out its return value. Because of it, the same call gives 6 on line 14 and 12 on line 15. You can't tell what addToCart(3, 2) returns without knowing what ran before it.

A component is a function too: its inputs are its props, and its output is JSX. React assumes every component is pure, like a formula. This one is:

1function CartLine({ name, price, quantity }) {2  const total = price * quantity;3  return (4    <li>5      {name} × {quantity}: ${total}6    </li>7  );8}9 10export default function App() {11  return (12    <ul>13      <CartLine name="Tea" price={3} quantity={2} />14      <CartLine name="Cake" price={4} quantity={1} />15      <CartLine name="Tea" price={3} quantity={2} />16    </ul>17  );18}

Line 1 takes three props. Line 2 makes a new variable, total, from them, and line 5 shows the line. Lines 13 and 15 pass exactly the same props, so they show exactly the same line, Tea × 2: $6. Making total is fine: it's a new variable, made during this call.

Side effects aren't only changed variables. Each of these makes a component impure if it runs while rendering:

• changing a variable or object from outside the component, including its props;
• changing the page directly, like setting document.title;
• sending a request with fetch, or saving to localStorage;
• reading something that differs from call to call, like Math.random() or the time from new Date(): it breaks "same inputs, same output".

What goes wrong when rendering changes a variable

You might think: "StrictMode is only in development. My users would see 1, 2, 3." They would, at first. But React renders a component again whenever its data changes. Here is the numbered cart with one button that changes something unrelated: a gift wrap choice. Press Gift wrap: off a few times:

1import { useState } from "react";2 3let lineNumber = 0;4 5function CartLine({ name }) {6  lineNumber = lineNumber + 1;7  return <li>{lineNumber}. {name}</li>;8}9 10export default function App() {11  const [wrapped, setWrapped] = useState(false);12  return (13    <>14      <ul>15        <CartLine name="Tea" />16        <CartLine name="Cake" />17        <CartLine name="Lemonade" />18      </ul>19      <button onClick={() => setWrapped(!wrapped)}>20        Gift wrap: {wrapped ? "on" : "off"}21      </button>22    </>23  );24}

Lines 3 to 8 are the same impure CartLine as before. Line 11 keeps the gift wrap choice in state, and the button on lines 19 to 21 flips it. A state change makes React render App again, and every CartLine inside it, as How React works: a first look showed. Each render calls each CartLine again, and each call adds to lineNumber, which nothing ever resets. After one click the cart says 8, 10, 12. After two: 14, 16, 18.

The playground replays these calls one by one. Press Click Gift wrap to render again, and watch the list of calls. Then turn StrictMode off: the first render shows 1, 2, 3, the way a production build would, and the next render shows 4, 5, 6. Last, choose Pure CartLine: 1, 2, 3, whatever you do.

Without StrictMode, the first render looks right, and the bug only shows when something else makes the cart render again. That might be a click far away, a timer, or new data from a server. Bugs like that are hard to find, because the component looks fine and the trigger is somewhere else.

There's a second problem: order. The numbers only came out in order because React happened to render Tea, then Cake, then Lemonade. A component should never depend on which other components rendered before it. React may skip a component whose inputs didn't change, or start a render and throw it away. A pure component gives the right answer in any order, any number of times.

How StrictMode's double render shows the bug

StrictMode is a component from react that turns on extra checks, in development only, for everything inside it. The most important check: React calls each of your components twice in a row and keeps the second result. A pure component returns the same JSX both times, so you see no difference. An impure one changes something on the first call, and the second call shows it.

A console.log in the component shows both calls. This pure CartLine logs each time React calls it. The console under the result shows what it printed:

1function CartLine({ name }) {2  console.log("Rendering", name);3  return <li>{name}</li>;4}5 6export default function App() {7  return (8    <ul>9      <CartLine name="Tea" />10      <CartLine name="Cake" />11    </ul>12  );13}

Line 2 logs the name. The console shows Rendering Tea and Rendering Cake, each with a small 2 beside it: when the same line is printed twice in a row, this page's console shows it once, with a count. Both calls printed the same thing, which is what a pure component does. Now the impure one:

1let lineNumber = 0;2 3function CartLine({ name }) {4  lineNumber = lineNumber + 1;5  console.log(name, "got number", lineNumber);6  return <li>{lineNumber}. {name}</li>;7}8 9export default function App() {10  return (11    <ul>12      <CartLine name="Tea" />13      <CartLine name="Cake" />14    </ul>15  );16}

Line 5 logs the number each call takes. This time the console shows four different lines: Tea got number 1, Tea got number 2, Cake got number 3, Cake got number 4. Two calls of the same component with the same props disagree: that's the sign of impure rendering. The page shows 2 and 4, the second calls.

In a production build, the one npm run build makes for your users, StrictMode does nothing, and React calls each component once. This preview has no production build, but it can leave StrictMode out. Its main.jsx tab starts the gift wrap cart from the last section without it:

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

Line 4 renders <App /> with no <StrictMode> around it. The cart shows 1, 2, 3. Press Gift wrap: off and it shows 4, 5, 6: the same bug, found later.

Your component's body isn't the only thing StrictMode repeats. Each row is one thing React does twice in development, and what that finds:

React 19 changed two details. During the second call of a component, useMemo and useCallback reuse the results from the first call, and ref callbacks now run twice when a component first appears. Effects, refs and useMemo come later in the course. For now, remember: StrictMode never changes what a pure app shows. It only makes impure code show itself sooner. Keep it on.

  if (shouldDoubleRenderDEV) {
    // In development, components are invoked twice to help detect side effects.
    setIsStrictModeForDevtools(true);
    try {
      children = renderWithHooksAgain(
        workInProgress,
        Component,
        props,
        secondArg,
      );
    } finally {
      setIsStrictModeForDevtools(false);
    }

By this point React has called Component, your function, once. Line 1 checks that StrictMode is on in a development build. Line 3 tells DevTools the second call is starting (that's what dims its logs), and lines 5 to 10 call your component again with the same props. Its result replaces children, the first call's result. Line 12 tells DevTools the second call is over.

Where changes belong: event handlers and Effects

Apps have to change things: add an order, save a cart, send a message. Purity doesn't forbid that; it says when. Not while React is rendering. The first place for a side effect is an event handler: a function React runs when something happens, like a click. Handlers are written inside your component, but they don't run while it renders, so they don't need to be pure. (The Introduction to events lesson covers events in plain JavaScript.)

1import { useState } from "react";2 3export default function App() {4  const [orders, setOrders] = useState([]);5 6  function placeOrder(drink) {7    const number = orders.length + 1;8    setOrders([...orders, `#${number} ${drink}`]);9    console.log("Order placed:", number);10  }11 12  return (13    <>14      <button onClick={() => placeOrder("Tea")}>Order tea</button>15      <button onClick={() => placeOrder("Cake")}>Order cake</button>16      <ul>17        {orders.map((order) => (18          <li key={order}>{order}</li>19        ))}20      </ul>21    </>22  );23}

Line 4 keeps the orders in state. placeOrder (lines 6 to 10) is the click handler: line 7 works out the next number, line 8 gives React a new list with the order added, and line 9 logs it. Click Order tea, then Order cake: the list shows #1 Tea and #2 Cake, and the console shows Order placed: 1 and Order placed: 2, once each. StrictMode doesn't call event handlers twice. The numbers come from orders, the component's state, not from a variable outside it, and React renders the list from that state.

Some side effects aren't caused by any event. Say the browser tab's title should show how many items are in the cart, whatever changed the count. For that, React has Effects: code that runs after React has put a render on the page. Use them as a last resort, when no event handler fits.

1import { useEffect, useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  useEffect(() => {7    document.title = `Cart (${count})`;8    console.log("Saved count:", count);9  });10 11  return <button onClick={() => setCount(count + 1)}>Items: {count}</button>;12}

Lines 6 to 9 pass a function to useEffect. React runs it after each render reaches the page: line 7 sets the tab's title, and line 8 logs. When the result first appears, the console shows Saved count: 0 twice. That's StrictMode's check for Effects: when a component first appears, React runs its Effect, cleans it up, and runs it again, in development only. Click the button and you get one Saved count: 1 per click. The Synchronizing with effects lesson teaches Effects properly, including the clean up.

How to read the table: each row is a place code can sit in a component, when it runs, and whether it may change things.

Why does React care so much? Because purity lets React do its job well:

• It can skip a component whose props didn't change and reuse the last result. The memo, useMemo and useCallback and The React Compiler lessons show how.
• It can start a render, stop, and start again when newer data arrives, without anything half-changed. Transitions rely on this.
• It can render the same component on a server for many visitors. Server rendering and hydration covers it.

Changing what you just made is fine

Purity is about things that existed before the call. A component can make its own arrays and variables while it renders, and change them as much as it likes. That's called local mutation (mutation means changing a value in place). Nobody outside the call can see it:

1const items = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7export default function Receipt() {8  const lines = [];9  let total = 0;10  for (const item of items) {11    total = total + item.price;12    lines.push(13      <li key={item.name}>14        {item.name}: ${item.price} (so far ${total})15      </li>16    );17  }18  return <ul>{lines}</ul>;19}

Line 8 makes a new, empty array, and line 9 a new total of 0. The loop on lines 10 to 17 changes both: line 11 adds to total, and line 12 pushes a line into lines. Line 18 returns them. The result shows three lines, ending Lemonade: $2 (so far $9). StrictMode called Receipt twice, and each call started again from an empty array and 0, so both calls returned the same receipt. Compare that with the numbered cart: there, lineNumber was made once, on line 1, outside every call.

The thing to watch is an array or object you were given. Props are shared: the parent, and maybe other components, hold the very same array (the Objects and references lesson explains why). Some array methods change the array itself. sort is one:

1const menu = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7function CheapestFirst({ items }) {8  items.sort((a, b) => a.price - b.price);9  return <p>Cheapest first: {items.map((item) => item.name).join(", ")}</p>;10}11 12function Menu({ items }) {13  return <p>Menu: {items.map((item) => item.name).join(", ")}</p>;14}15 16export default function App() {17  return (18    <>19      <Menu items={menu} />20      <CheapestFirst items={menu} />21      <Menu items={menu} />22    </>23  );24}

Lines 1 to 5 make one menu, and App passes it to three components on lines 19 to 21. Line 8 sorts items, cheapest first. But items is menu: the same array. The first Menu rendered before the sort and shows Tea, Cake, Lemonade. The second rendered after it and shows Lemonade, Tea, Cake. Same component, same props, different result: the order of rendering decided it.

The fix is to sort a copy that you make during this call:

1const menu = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7function CheapestFirst({ items }) {8  const sorted = [...items].sort((a, b) => a.price - b.price);9  return <p>Cheapest first: {sorted.map((item) => item.name).join(", ")}</p>;10}11 12function Menu({ items }) {13  return <p>Menu: {items.map((item) => item.name).join(", ")}</p>;14}15 16export default function App() {17  return (18    <>19      <Menu items={menu} />20      <CheapestFirst items={menu} />21      <Menu items={menu} />22    </>23  );24}

Line 8 makes a new array with spread, [...items], and sorts that. Sorting the copy is local mutation, so it's fine. Line 9 shows the copy. Both Menu lines now show Tea, Cake, Lemonade. Arrays also have toSorted(), which returns a sorted copy in one step: items.toSorted((a, b) => a.price - b.price). The Sorting arrays and Immutability lessons list which methods change the array and which make a copy.

A checkout summary that stays pure

Here is everything together in a checkout page: lines sorted by cost, a subtotal, a discount, and a button that places orders. Click Place order twice:

1import { useState } from "react";2 3const cart = [4  { name: "Cake", price: 4, quantity: 1 },5  { name: "Tea", price: 3, quantity: 2 },6  { name: "Lemonade", price: 2, quantity: 4 },7];8 9function Summary({ items, discount }) {10  const sorted = [...items].sort((a, b) => b.price * b.quantity - a.price * a.quantity);11  let subtotal = 0;12  for (const item of sorted) {13    subtotal = subtotal + item.price * item.quantity;14  }15  const total = subtotal - discount;16  return (17    <>18      <ol>19        {sorted.map((item) => (20          <li key={item.name}>21            {item.name} × {item.quantity}: ${item.price * item.quantity}22          </li>23        ))}24      </ol>25      <p>Total: ${total}</p>26    </>27  );28}29 30export default function App() {31  const [orders, setOrders] = useState([]);32 33  function placeOrder() {34    setOrders([...orders, orders.length + 1]);35  }36 37  return (38    <>39      <Summary items={cart} discount={2} />40      <button onClick={placeOrder}>Place order</button>41      <p>Orders placed: {orders.length ? orders.map((n) => `#${n}`).join(", ") : "none"}</p>42    </>43  );44}

Summary (lines 9 to 28) only calculates. Line 10 sorts a copy of items, most expensive line first. Lines 11 to 14 add up a subtotal in a local variable, and line 15 takes off the discount. The result lists Lemonade × 4: $8, Tea × 2: $6, and Cake × 1: $4, then Total: $16. The one change to the app's data happens in placeOrder (lines 33 to 35), a click handler, which gives React a new list of orders. After two clicks the page says Orders placed: #1, #2. Render it as often as you like: the summary stays the same, and only clicks add orders.

Common mix-ups

• "StrictMode causes the bug." No. The bug is the impure code. StrictMode makes it show on the first render instead of a later one. Without it, the gift wrap cart went wrong on the first click.
• "My users see everything twice." No. The double call happens only in development. A production build calls each component once.
• "A pure component can't change any variable." No. It can make and change its own variables and arrays during the render, like total and lines in the receipt.
• "Event handlers must be pure too." No. They run when something happens, not while rendering. They are the first place for side effects.
• "Sorting a prop is fine, it's only reading it." No. sort, reverse, and push change the array itself, and props are shared with the parent. Sort a copy.
• "Pure components render less often." No. Purity doesn't change when React renders. It makes rendering safe to repeat, skip, or throw away, which is what React's performance tools rely on.

Practice exercises

Every result here runs in StrictMode, like the examples above. Make a guess first, then use the hints. Press Edit & run to change the code and watch the result.

let visits = 10;

export default function Welcome() {
  visits = visits + 1;
  return <h1>Welcome back! Visit {visits}</h1>;
}

1let visits = 10;2 3export default function Welcome() {4  visits = visits + 1;5  return <h1>Welcome back! Visit {visits}</h1>;6}

1let lastShown = "";2 3export default function ProductTitle({ name = "Tea", price = 3 }) {4  const label = name.toUpperCase();5  const withPrice = `${label} ($${price})`;6  lastShown = withPrice;7  return <h2>{withPrice}</h2>;8}

1export default function ProductTitle({ name = "Tea", price = 3 }) {2  const label = name.toUpperCase();3  const withPrice = `${label} ($${price})`;4  return <h2>{withPrice}</h2>;5}

1const cart = ["Tea", "Cake", "Lemonade"];2let count = 0;3 4function CartLine({ name }) {5  count = count + 1;6  return <li>{count}. {name}</li>;7}8 9export default function App() {10  return (11    <ul>12      {cart.map((name) => (13        <CartLine key={name} name={name} />14      ))}15    </ul>16  );17}

1const cart = ["Tea", "Cake", "Lemonade"];2 3function CartLine({ number, name }) {4  return <li>{number}. {name}</li>;5}6 7export default function App() {8  return (9    <ul>10      {cart.map((name, index) => (11        <CartLine key={name} number={index + 1} name={name} />12      ))}13    </ul>14  );15}

1const menu = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7function CheapestFirst({ items }) {8  items.sort((a, b) => a.price - b.price);9  return <p>Cheapest first: {items.map((item) => item.name).join(", ")}</p>;10}11 12function Menu({ items }) {13  return <p>Menu: {items.map((item) => item.name).join(", ")}</p>;14}15 16export default function App() {17  return (18    <>19      <Menu items={menu} />20      <CheapestFirst items={menu} />21      <Menu items={menu} />22    </>23  );24}

1const menu = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7function CheapestFirst({ items }) {8  const sorted = [...items].sort((a, b) => a.price - b.price);9  return <p>Cheapest first: {sorted.map((item) => item.name).join(", ")}</p>;10}11 12function Menu({ items }) {13  return <p>Menu: {items.map((item) => item.name).join(", ")}</p>;14}15 16export default function App() {17  return (18    <>19      <Menu items={menu} />20      <CheapestFirst items={menu} />21      <Menu items={menu} />22    </>23  );24}

1import { useState } from "react";2 3let nextTicket = 1;4 5export default function App() {6  const [orders, setOrders] = useState([]);7  const ticket = nextTicket;8  nextTicket = nextTicket + 1;9 10  return (11    <>12      <button onClick={() => setOrders([...orders, ticket])}>Place order</button>13      <p>Tickets: {orders.join(", ")}</p>14    </>15  );16}

1import { useState } from "react";2 3export default function App() {4  const [orders, setOrders] = useState([]);5 6  function placeOrder() {7    setOrders([...orders, orders.length + 1]);8  }9 10  return (11    <>12      <button onClick={placeOrder}>Place order</button>13      <p>Tickets: {orders.join(", ")}</p>14    </>15  );16}

1const items = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7export default function Receipt() {8  return (9    <ul>10      <li>Tea: $3 (total $3)</li>11    </ul>12  );13}

1const items = [2  { name: "Tea", price: 3 },3  { name: "Cake", price: 4 },4  { name: "Lemonade", price: 2 },5];6 7export default function Receipt() {8  const lines = [];9  let total = 0;10  for (const item of items) {11    total = total + item.price;12    lines.push(13      <li key={item.name}>14        {item.name}: ${item.price} (total ${total})15      </li>16    );17  }18  return <ul>{lines}</ul>;19}

Check your understanding

For each code question, ask: does anything the component changes exist before the call? And remember that StrictMode calls it twice. Press Edit & run on a question's code to check your answer.

Key takeaways

• A pure component changes nothing that existed before the call, and returns the same JSX for the same props.
• Changing a variable from outside while rendering makes the result depend on how often, and in what order, React rendered: the numbered cart climbed on every render.
• In development, StrictMode calls each component twice in a row and keeps the second result, so impure rendering shows at once. A production build calls it once.
• This page's console prints both calls; with React DevTools installed, the second call's logs are dimmed.
• Side effects go in event handlers first, and in Effects, which run after the render reaches the page, as a last resort.
• Changing arrays and variables you made during the same render is fine. Copy a prop before you sort it.

Coming next: Your UI as a tree. It shows how React sees your components as a tree, and why that tree explains rendering, state, and performance.