memo, useMemo and useCallback

A list that renders again for nothing

When a component's state changes, React renders it again, and every component inside it too. When React re-renders showed why that's usually fine: a render is a call to your function, and React only changes the page where the result is different. But some renders are slow, and some happen for nothing. Here a shop page has a note box and a list of teas. The result is live: click in the box, type a word, and watch the small counter next to Teas.

1import { useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6function TeaList({ items }) {7  return (8    <section>9      <h3>Teas <RenderCount /></h3>10      <ul>11        {items.map((tea) => (12          <li key={tea}>{tea}</li>13        ))}14      </ul>15    </section>16  );17}18 19export default function App() {20  const [note, setNote] = useState("");21  return (22    <>23      <input24        value={note}25        onChange={(event) => setNote(event.target.value)}26        placeholder="A note for the shop"27      />28      <TeaList items={teas} />29    </>30  );31}

Line 4 makes the list of teas once, outside any component. TeaList (lines 6 to 17) draws it. Line 9 puts a <RenderCount /> next to the heading: a small helper, in the RenderCount.jsx tab, that shows how many renders of TeaList React has put on the page. It's the counter from When React re-renders, without the blue flash, and you don't need to read it to use it. Line 20 keeps the note in state, and line 25 updates it on every key. Line 28 renders TeaList with the same teas every time.

Type hi. The counter says renders: 3: the first render, plus one for each key. Yet the list never changed. Each key updates App's state, so React renders App, and with it TeaList, which gives back the same three teas. Now tell React to skip TeaList when nothing it gets has changed:

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6const TeaList = memo(function TeaList({ items }) {7  return (8    <section>9      <h3>Teas <RenderCount /></h3>10      <ul>11        {items.map((tea) => (12          <li key={tea}>{tea}</li>13        ))}14      </ul>15    </section>16  );17});18 19export default function App() {20  const [note, setNote] = useState("");21  return (22    <>23      <input24        value={note}25        onChange={(event) => setNote(event.target.value)}26        placeholder="A note for the shop"27      />28      <TeaList items={teas} />29    </>30  );31}

Two lines changed. Line 1 imports memo from React, and line 6 passes TeaList to it: const TeaList = memo(function TeaList(…) {…}), closed with }); on line 17. Type hi again. The counter stays at renders: 1. Before it renders TeaList, React now checks whether its props are the same as last time. items is the same teas array, so React skips TeaList and keeps what it showed before.

Keeping a result and reusing it while its inputs stay the same is called memoization. The Memoization lesson in the JavaScript course does it for plain functions. React gives you three tools for it, and this lesson covers each: memo for a component, useMemo for a value you work out, and useCallback for a function.

memo skips a component when its props are the same

memo takes your component and gives back a new one that renders the same thing, with one difference: before each render after the first, React compares the new props with the old ones. Here TeaList gets two props, and a button changes one of them:

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { name: "Green tea", price: 3 },6  { name: "Black tea", price: 2 },7  { name: "Mint tea", price: 4 },8];9 10const TeaList = memo(function TeaList({ items, showPrices }) {11  return (12    <section>13      <h3>Teas <RenderCount /></h3>14      <ul>15        {items.map((tea) => (16          <li key={tea.name}>17            {tea.name}18            {showPrices && ` $${tea.price}`}19          </li>20        ))}21      </ul>22    </section>23  );24});25 26export default function App() {27  const [note, setNote] = useState("");28  const [showPrices, setShowPrices] = useState(false);29  return (30    <>31      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />32      <button onClick={() => setShowPrices(!showPrices)}>{showPrices ? "Hide prices" : "Show prices"}</button>33      <TeaList items={teas} showPrices={showPrices} />34    </>35  );36}

Lines 4 to 8 make the teas once, with their prices. Line 10 wraps TeaList in memo; it takes items and showPrices. Line 18 adds the price to each tea when showPrices is true. In App, line 28 keeps showPrices in state, line 32's button flips it, and line 33 passes both props.

Type a note: the counter stays at renders: 1. Press Show prices: the prices appear and the counter says renders: 2. Type again: it stays at 2. Each time App renders, React takes the props that line 33 gives TeaList and checks them one at a time against last time's:

• items: the same teas array from line 4, every time.
• showPrices: false and false while you type; false and true after the button.

If every prop is the same, React skips TeaList. If even one differs, it renders TeaList with the new props. The check it uses for "the same" is Object.is, which works like === (the Equality lesson covers the two small cases where they differ). Run this to see what it says about the kinds of values props hold:

const teas = ["Green tea", "Black tea"];

console.log(Object.is(teas, teas));
console.log(Object.is(["Green tea", "Black tea"], ["Green tea", "Black tea"]));
console.log(Object.is(3, 3), Object.is("Tea", "Tea"));
console.log(Object.is(() => {}, () => {}));
console.log(Object.is({ inStock: true }, { inStock: true }));

Line 3 prints true: teas is compared with itself. Line 4 prints false: two arrays with the same teas are still two arrays. Line 5 prints true true: numbers and strings are compared by their value. Lines 6 and 7 print false: two functions, or two objects, are different values even when they're written the same way. Objects, arrays and functions are compared by which one they are, not by what's inside (the Objects and references lesson explains why).

This kind of check is called shallow: React compares each prop as a whole and never looks inside it. So if code changes an array in place, say with teas.push(…), memo sees the same array and skips the render, and the list on screen falls behind. That's one more reason state updates make new arrays and objects, as Updating arrays in state showed. (Without memo, React only checks whether the whole props object is the same object, which it never is after the parent renders. The Reconciliation and the diffing algorithm lesson, in the Under the hood stage, shows that check in React's code.)

Three more things to know about memo:

• It only looks at props. A memo'd component still renders when its own state changes, or when a context it reads with useContext changes.
• It's a speed-up, not a promise. React's docs say React may still render a memo'd component now and then, so your page must show the right thing either way.
• memo(TeaList, arePropsEqual) takes your own comparison as a second argument, a function that gets the old and new props and returns true to skip. You rarely need it, and it must compare every prop, functions included, or the component can show old data. A deep comparison that walks through big objects can be slower than the render it skips.

useMemo keeps a slow calculation's result

memo skips a whole component. Sometimes the slow part is one calculation inside a component that has to render anyway. Here a tea search filters its list with filterTeas, in the teas.js tab. It's slow on purpose: lines 13 to 16 of that tab wait 20 ms before it filters, and line 18 logs how long it took. Open the console under the result.

1import { useState } from "react";2import { filterTeas, teas } from "./teas.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const [large, setLarge] = useState(false);7  const visible = filterTeas(teas, query);8 9  return (10    <div style={{ fontSize: large ? 20 : 15 }}>11      <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Find a tea" />12      <button onClick={() => setLarge(!large)}>Larger text</button>13      <ul>14        {visible.map((tea) => (15          <li key={tea}>{tea}</li>16        ))}17      </ul>18    </div>19  );20}

Line 7 calls filterTeas during every render. Line 6 keeps a second piece of state, large, which line 10 uses for the text size and line 12's button flips. It has nothing to do with the teas.

The console already shows filterTeas("") took 20 ms, with a small 2 beside it: in development, StrictMode renders every component twice to help you find mistakes, so each render logs twice, and the console counts the same line instead of repeating it. Press Larger text: the 2 becomes a 4. That's two more runs, 40 ms of filtering (20 ms in a production build, without StrictMode) to make the text bigger, for a list that didn't change. That's your "before" measurement. Now keep the result with useMemo:

1import { useMemo, useState } from "react";2import { filterTeas, teas } from "./teas.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const [large, setLarge] = useState(false);7  const visible = useMemo(() => filterTeas(teas, query), [query]);8 9  return (10    <div style={{ fontSize: large ? 20 : 15 }}>11      <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Find a tea" />12      <button onClick={() => setLarge(!large)}>Larger text</button>13      <ul>14        {visible.map((tea) => (15          <li key={tea}>{tea}</li>16        ))}17      </ul>18    </div>19  );20}

Line 1 imports useMemo, and line 7 wraps the call: useMemo(() => filterTeas(teas, query), [query]). It takes two things:

1. A function with no arguments that works out the value: () => filterTeas(teas, query).
2. A dependency array, [query]: every value from the component that the calculation reads and that can change between renders.

On the first render, React calls the function and keeps two things: the result, and the dependencies it was worked out from. On each later render, it compares every dependency with last time, using Object.is again. All the same: it hands back the kept result without calling anything. One changed: it calls the function, and keeps the new result instead.

Press Larger text: the count stays at 2, because filterTeas didn't run. That's your "after": 0 ms of filtering per click. Type g: filterTeas("g") took 20 ms appears, with a 2. query changed, so React works the list out again (and in development StrictMode calls your function twice, throwing one result away, to catch impure code). Typing costs exactly what it did before. useMemo doesn't make a calculation faster; it skips the repeats.

You met useMemo once already, in You might not need an effect, as the right way to cache a filter instead of an effect. A few more rules:

teas isn't in the array because it's made once, outside the component, and never changes. If the teas came in as a prop, they could change between renders, so they'd be a dependency too:

function TeaSearch({ teas, query }) {
  const visible = useMemo(() => filterTeas(teas, query), [teas, query]);
  // …
}

This is part of a component, not a whole example, so it doesn't run here. Line 2 lists both values the calculation reads.

• The function runs during the render, so it must be pure: work out a value and change nothing outside it (see Keeping components pure). The lint rule react-hooks/exhaustive-deps from Rules of Hooks checks the array for you.
• The kept result is a speed-up, not storage. React can throw it away, for example while you edit a file in development, so the page must be right even when the function runs again.

useCallback keeps the same function

Props can be functions too, like a handler that adds a tea to the cart. Here TeaList is wrapped in memo and gets one. Type a note and watch its counter:

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6const TeaList = memo(function TeaList({ items, onAdd }) {7  return (8    <section>9      <h3>Teas <RenderCount /></h3>10      {items.map((tea) => (11        <button key={tea} onClick={() => onAdd(tea)}>12          Add {tea}13        </button>14      ))}15    </section>16  );17});18 19export default function App() {20  const [note, setNote] = useState("");21  const [cart, setCart] = useState([]);22 23  function addTea(tea) {24    setCart([...cart, tea]);25  }26 27  return (28    <>29      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />30      <p>Items in cart: {cart.length}</p>31      <TeaList items={teas} onAdd={addTea} />32    </>33  );34}

Line 6 wraps TeaList in memo, and line 11 calls onAdd(tea) when you press a button. In App, lines 23 to 25 declare addTea, and line 31 passes it. Type a word: the counter goes up with every key, even though memo is there. A function declared inside a component is made again on every render, so each render of App passes a new addTea. Functions are objects (see Function objects), and Object.is never calls two of them the same.

1import { memo, useCallback, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6const TeaList = memo(function TeaList({ items, onAdd }) {7  return (8    <section>9      <h3>Teas <RenderCount /></h3>10      {items.map((tea) => (11        <button key={tea} onClick={() => onAdd(tea)}>12          Add {tea}13        </button>14      ))}15    </section>16  );17});18 19export default function App() {20  const [note, setNote] = useState("");21  const [cart, setCart] = useState([]);22 23  const addTea = useCallback((tea) => {24    setCart([...cart, tea]);25  }, [cart]);26 27  return (28    <>29      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />30      <p>Items in cart: {cart.length}</p>31      <TeaList items={teas} onAdd={addTea} />32    </>33  );34}

Line 1 imports useCallback. Lines 23 to 25 pass the function to it, with a dependency array, [cart], on line 25. On the first render React keeps the function. On later renders, while cart is the same, it hands back that same function instead of the new one. Type a word: the counter stays at renders: 1. Press Add Green tea twice: it says renders: 3 and the cart has 2 items. Adding changes cart, so addTea must be a new function that sees the new cart, and TeaList renders with it. That's right, not a bug.

Press Edit & run and change line 24 to setCart((items) => [...items, tea]); and line 25 to }, []);. With an updater function (from Queueing state updates), addTea no longer reads cart at all, so it has no dependencies and stays the same forever. Now adding teas leaves the counter at renders: 1 too.

useCallback is useMemo for a function. These two lines do the same thing:

const addTea = useCallback((tea) => {
  setCart([...cart, tea]);
}, [cart]);

// does the same as:
const addTea = useMemo(() => (tea) => {
  setCart([...cart, tea]);
}, [cart]);

Lines 1 to 3 keep the function itself. Lines 6 to 8 keep the result of a function that returns it, which is the same thing written the long way. useCallback never calls your function; it only keeps it. So it helps in exactly two places, where code compares functions:

• A prop of a component wrapped in memo, as here.
• A dependency of another Hook, like an effect that should only run again when the function really changes:

const loadTeas = useCallback(() => {
  return fetch(`/api/teas?q=${query}`);
}, [query]);

useEffect(() => {
  loadTeas();
}, [loadTeas]);

Line 3 makes loadTeas change only when query does, and line 7 lists it as the effect's dependency, so the effect runs again only for a new query. Often a cleaner fix is to move the function inside the effect, as Removing effect dependencies showed. Anywhere else, like onClick on a plain <button>, nothing compares the function, and useCallback only adds work. How to read the table: each row is one tool, what React keeps for it, and when React hands that back instead of doing the work again.

Why memo often doesn't help

memo is easy to add and easy to break without noticing. Here are four memo'd components side by side, each with a counter. Type a word in the box:

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const Title = memo(function Title({ text }) {5  return <h3>{text} <RenderCount /></h3>;6});7 8const Filters = memo(function Filters({ options }) {9  return <p>In stock only: {options.inStock ? "yes" : "no"} <RenderCount /></p>;10});11 12const AddButton = memo(function AddButton({ onAdd }) {13  return <button onClick={onAdd}>Add tea <RenderCount /></button>;14});15 16const Panel = memo(function Panel({ children }) {17  return <div>{children} <RenderCount /></div>;18});19 20export default function App() {21  const [note, setNote] = useState("");22  const [cart, setCart] = useState(0);23  return (24    <>25      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />26      <Title text="Teas" />27      <Filters options={{ inStock: true }} />28      <AddButton onAdd={() => setCart(cart + 1)} />29      <Panel>30        <p>Fresh today</p>31      </Panel>32      <p>Cart: {cart}</p>33    </>34  );35}

Lines 4 to 18 wrap four small components in memo. Only Title stays at renders: 1. The other three climb with every key, and each for the same reason: App makes one of their props again on every render.

• Line 26 passes text="Teas", a string. Strings are compared by value, so it's always the same.
• Line 27 passes options={{ inStock: true }}. The outer braces put a JavaScript value into JSX; the inner ones make a new object, on every render.
• Line 28 passes onAdd={() => setCart(cart + 1)}: a new arrow function on every render.
• Lines 29 to 31 put <p>Fresh today</p> between Panel's tags. JSX is a call that makes an object (see Writing JSX), and that object reaches Panel as its children prop, new on every render.

The fix is to pass the same value each time. Press Edit & run, add const inStockOnly = { inStock: true }; above App (line 20), and change the Filters line (line 27) to pass options={inStockOnly}: the object is now made once, and Filters stays at renders: 1. An object that depends on state gets useMemo instead, a function gets useCallback, and JSX children can be kept with useMemo or moved into the memo'd component itself (Exercise 6 does this).

In the playground, App passes a memo'd TeaList its props in one of five ways. Pick one, press Render App again a few times, and read what memo compared, prop by prop.

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const TeaList = memo(function TeaList(props) {5  return <p>TeaList <RenderCount /></p>;6});7 8export default function App() {9  const [clicks, setClicks] = useState(0);10  const [picked, setPicked] = useState(null);11  return (12    <>13      <button onClick={() => setClicks(clicks + 1)}>Render App again</button>14      <TeaList title="Teas" count={3} />15    </>16  );17}

Only plain values, and values kept by useMemo and useCallback, let memo skip. One prop that is new on every render is enough to make memo do its comparison and then render anyway, which is a little slower than no memo at all.

When to bother: measure first

Memoizing isn't free. Each tool costs something on every render, skipped or not:

• React compares each prop or dependency with last time.
• React keeps the old props, values and functions in memory.
• Your code gets longer, and every dependency array must stay right. A wrong one is a bug: Exercise 5 shows a cart that stops counting.

So before you memoize a calculation, measure it. Note the time before and after with performance.now(), as this example does, and look at the console:

1import { useState } from "react";2 3const products = Array.from({ length: 1000 }, (_, index) => ({4  name: `Tea ${index + 1}`,5  price: (index % 9) + 1,6}));7 8export default function App() {9  const [large, setLarge] = useState(false);10 11  const start = performance.now();12  const cheap = products.filter((product) => product.price <= 3);13  const time = performance.now() - start;14  console.log(`Filtering ${products.length} products took ${time.toFixed(2)} ms`);15 16  return (17    <div style={{ fontSize: large ? 20 : 15 }}>18      <button onClick={() => setLarge(!large)}>Larger text</button>19      <p>{cheap.length} teas cost $3 or less.</p>20    </div>21  );22}

Lines 3 to 6 make 1,000 products. Line 11 notes the time, line 12 filters the cheap ones, and line 13 works out how long it took, in milliseconds. Line 14 logs it. On most computers it says well under 1 ms. Press Larger text a few times to measure again. React's docs suggest caching only work that adds up to about 1 ms or more; this filter isn't worth a useMemo. (In your own browser's console, console.time and console.timeEnd measure the same way.)

Measure the way your users will see it:

• A development build is slower than a production build, with StrictMode's extra renders and extra checks, so check a production build before you decide.
• Your laptop is faster than many phones. The Performance panel in Chrome's developer tools can slow its CPU down on purpose ("CPU throttling") to show what a slower device feels.
• To find which components render and how long they take, use the Profiler in React Developer Tools, which Profiling React apps covers.

How to read the table: each row is something you notice, and whether memoizing is worth it then.

Often a change in structure beats memoizing. If the note box lived in its own component with its own state, typing would render only that component, and TeaList would never render at all, with no memo needed. That's "moving state down", from When React re-renders, and Performance patterns adds more fixes like it.

A shop page, memoized where it counts

Here the three tools work together on a page with a search box, a note box and a cart. The product grid is the slow part: each card in the ProductGrid.jsx tab waits 2 ms on purpose (lines 5 to 8 of that tab), and the grid is wrapped in memo on line 17 of that tab.

1import { useCallback, useMemo, useState } from "react";2import ProductGrid from "./ProductGrid.jsx";3 4const products = [5  { name: "Green tea", price: 3 },6  { name: "Black tea", price: 2 },7  { name: "Mint tea", price: 4 },8  { name: "Lemon tea", price: 3 },9  { name: "Jasmine tea", price: 5 },10];11 12export default function App() {13  const [query, setQuery] = useState("");14  const [note, setNote] = useState("");15  const [cart, setCart] = useState([]);16 17  const visible = useMemo(18    () => products.filter((product) => product.name.toLowerCase().includes(query.toLowerCase())),19    [query],20  );21 22  const addToCart = useCallback((product) => {23    setCart((items) => [...items, product]);24  }, []);25 26  return (27    <>28      <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Find a tea" />29      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />30      <p>Items in cart: {cart.length}</p>31      <ProductGrid products={visible} onAdd={addToCart} />32    </>33  );34}

Lines 17 to 20 keep the filtered products with useMemo, worked out again only when query changes. Lines 22 to 24 keep addToCart with useCallback. Its updater function on line 23 doesn't read cart, so its dependency array is empty and it never changes. Line 31 passes both to the grid.

Type in the note box: the Products counter stays at renders: 1. Press an Add button: the cart count goes up, and the counter still says renders: 1, because neither visible nor addToCart changed. Type le in the search box: the grid shows Lemon tea and the counter goes up, because the list really changed. Sort each card below: when App renders again, does memo skip TeaList? Assume teas is an array made once outside App, pick and sorted come from useCallback and useMemo with no dependencies, choose is a function declared inside App, and clicks is the state that just changed.

Common mix-ups

• "memo makes a component faster." No. It skips a render when every prop is the same. When the component does render, it takes just as long, plus the time to compare.
• "memo compares objects by what's inside them." No. It compares each prop with Object.is. Two objects with the same contents are still two objects.
• "useCallback makes a function run faster." No. It keeps the same function between renders. That only matters to a memo'd component or a dependency array that compares it.
• "useMemo makes the first render faster." No. The first render always does the work. useMemo only skips it on later renders whose dependencies didn't change.
• "Wrap everything in memo, just in case." No. Every memo compares props on every render, and it skips nothing while a prop is new each time. Memoize what you measured as slow.
• "React notices a value I left out of the dependency array." No. It hands back the old result or the old function, which reads old values: the cart that stops at 1. The exhaustive-deps lint rule catches this.
• "A memo'd component never renders again." No. It renders when a prop changes, when its own state changes, and when a context it reads changes.
• "My page needs useMemo to work." No. Memoizing is only for speed, and React may throw a kept value away. Your page must show the right thing without it.

Practice exercises

The exercises use the same RenderCount helper and the same slow filterTeas, in their tabs. Change the code with Edit & run; the result updates as you type.

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

const teas = ["Green tea", "Black tea"];

const TeaList = memo(function TeaList({ items, title }) {
  return <p>{title}: {items.length} <RenderCount /></p>;
});

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
      <TeaList items={teas} title="Teas" />
    </>
  );
}

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea"];5 6const TeaList = memo(function TeaList({ items, title }) {7  return <p>{title}: {items.length} <RenderCount /></p>;8});9 10export default function App() {11  const [count, setCount] = useState(0);12  return (13    <>14      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>15      <TeaList items={teas} title="Teas" />16    </>17  );18}

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

const teas = ["Green tea", "Black tea"];

const TeaList = memo(function TeaList({ items, style }) {
  return <p style={style}>Teas: {items.length} <RenderCount /></p>;
});

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
      <TeaList items={teas} style={{ fontWeight: "bold" }} />
    </>
  );
}

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea"];5 6const TeaList = memo(function TeaList({ items, style }) {7  return <p style={style}>Teas: {items.length} <RenderCount /></p>;8});9 10export default function App() {11  const [count, setCount] = useState(0);12  return (13    <>14      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>15      <TeaList items={teas} style={{ fontWeight: "bold" }} />16    </>17  );18}

1import { useState } from "react";2import TeaList from "./TeaList.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6export default function App() {7  const [note, setNote] = useState("");8  return (9    <>10      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />11      <TeaList items={teas} />12    </>13  );14}

1import { useState } from "react";2import TeaList from "./TeaList.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6export default function App() {7  const [note, setNote] = useState("");8  return (9    <>10      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />11      <TeaList items={teas} />12    </>13  );14}

1import { useState } from "react";2import { filterTeas, teas } from "./teas.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const [dark, setDark] = useState(false);7  const visible = filterTeas(teas, query);8 9  return (10    <div style={{ background: dark ? "#222" : "#fff", color: dark ? "#eee" : "#222", padding: 8 }}>11      <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Find a tea" />12      <button onClick={() => setDark(!dark)}>Dark mode</button>13      <ul>14        {visible.map((tea) => (15          <li key={tea}>{tea}</li>16        ))}17      </ul>18    </div>19  );20}

1import { useMemo, useState } from "react";2import { filterTeas, teas } from "./teas.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const [dark, setDark] = useState(false);7  const visible = useMemo(() => filterTeas(teas, query), [query]);8 9  return (10    <div style={{ background: dark ? "#222" : "#fff", color: dark ? "#eee" : "#222", padding: 8 }}>11      <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Find a tea" />12      <button onClick={() => setDark(!dark)}>Dark mode</button>13      <ul>14        {visible.map((tea) => (15          <li key={tea}>{tea}</li>16        ))}17      </ul>18    </div>19  );20}

1import { memo, useCallback, useState } from "react";2 3const teas = ["Green tea", "Black tea"];4 5const TeaList = memo(function TeaList({ items, onAdd }) {6  return items.map((tea) => (7    <button key={tea} onClick={() => onAdd(tea)}>8      Add {tea}9    </button>10  ));11});12 13export default function App() {14  const [cart, setCart] = useState([]);15 16  const addTea = useCallback((tea) => {17    setCart([...cart, tea]);18  }, []);19 20  return (21    <>22      <p>Items in cart: {cart.length}</p>23      <TeaList items={teas} onAdd={addTea} />24    </>25  );26}

1import { memo, useCallback, useState } from "react";2 3const teas = ["Green tea", "Black tea"];4 5const TeaList = memo(function TeaList({ items, onAdd }) {6  return items.map((tea) => (7    <button key={tea} onClick={() => onAdd(tea)}>8      Add {tea}9    </button>10  ));11});12 13export default function App() {14  const [cart, setCart] = useState([]);15 16  const addTea = useCallback((tea) => {17    setCart((items) => [...items, tea]);18  }, []);19 20  return (21    <>22      <p>Items in cart: {cart.length}</p>23      <TeaList items={teas} onAdd={addTea} />24    </>25  );26}

1import { memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6const Panel = memo(function Panel({ title, children }) {7  return (8    <section>9      <h3>{title} <RenderCount /></h3>10      {children}11    </section>12  );13});14 15export default function App() {16  const [note, setNote] = useState("");17  return (18    <>19      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />20      <Panel title="Teas">21        <ul>22          {teas.map((tea) => (23            <li key={tea}>{tea}</li>24          ))}25        </ul>26      </Panel>27    </>28  );29}

1import { memo, useMemo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = ["Green tea", "Black tea", "Mint tea"];5 6const Panel = memo(function Panel({ title, children }) {7  return (8    <section>9      <h3>{title} <RenderCount /></h3>10      {children}11    </section>12  );13});14 15export default function App() {16  const [note, setNote] = useState("");17  const list = useMemo(18    () => (19      <ul>20        {teas.map((tea) => (21          <li key={tea}>{tea}</li>22        ))}23      </ul>24    ),25    [],26  );27  return (28    <>29      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />30      <Panel title="Teas">{list}</Panel>31    </>32  );33}

Check your understanding

For each question, ask what is being compared, and whether it's the same value as last time.

Key takeaways

• A parent's render renders its children. memo(Component) skips a child when every prop is the same as last time.
• "The same" means Object.is, one prop at a time. Strings and numbers compare by value; objects, arrays, functions and JSX compare by which one they are.
• useMemo(() => work, deps) keeps a calculated value until a dependency changes. It skips repeats; it doesn't speed up the first run.
• useCallback(fn, deps) keeps a function. It only helps a memo'd component or a dependency array.
• A new object, function or JSX child made during each render breaks memo.
• Measure first: memoize work that takes about 1 ms or more, or a slow component that renders often with the same props.
• The React Compiler adds this memoization for you at build time.

Coming next: The React Compiler. It adds memo, useMemo and useCallback's work to your components at build time, so you can write plain code.