memo, useMemo и useCallback: что они делают

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

memo — обёртка над компонентом. Она запоминает пропсы, с которыми компонент рендерился в прошлый раз, и при следующем рендере родителя сравнивает их с новыми. Совпали — React не вызывает функцию компонента вовсе и оставляет прошлый результат как есть. Не совпали — рендер идёт обычным порядком.

Из статьи «Триггер, рендер, коммит» известно: одна заявка на рендер тянет за собой рендер всего поддерева, даже тех компонентов, у которых ничего не менялось. memo ставит на этом пути заслон. Ниже состояние есть только у List, а Row получает одну и ту же строку — сколько строк «рендер Row» напечатают два клика?

tsx

interface RowProps {
  label: string;
}

const Row = React.memo(function Row({ label }: RowProps) {
  console.log("рендер Row:", label);
  return <li>{label}</li>;
});

function List() {
  const [count, setCount] = React.useState(0);
  console.log("рендер List, count =", count);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <ul>
        <Row label="строка" />
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Отрисовка Row одна — самая первая. На кликах React дошёл до Row, увидел прежний label и не стал вызывать функцию. Сам List при этом рендерится каждый раз: memo защищает не того, кто его вызвал, а того, кого им обернули.

Сравнение поверхностное: React проходит по ключам пропсов и сравнивает значения через Object.is — тем же способом, каким решает, изменилось ли состояние (о ссылках и сравнении шла речь в «Объекты и массивы в состоянии»). Вглубь объектов он не заглядывает и содержимое не обходит.

memo ничего не запрещает. Он утверждает: пропсы те же — значит, и результат будет тот же, вызывать незачем.

И сразу о границах. memo смотрит только на пропсы. Собственное состояние компонента и значение контекста, на который он подписан, перерисуют его независимо от того, обёрнут он или нет.

Тот же memo, но пропс — объект. Значения в нём от клика к клику не меняются: цвет всегда teal, текст всегда один. Предскажите, сколько раз напечатается «рендер Badge».

tsx

interface BadgeProps {
  style: { color: string };
  text: string;
}

const Badge = React.memo(function Badge({ style, text }: BadgeProps) {
  console.log("рендер Badge:", text);
  return <span style={style}>{text}</span>;
});

function Panel() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Badge style={{ color: "teal" }} text="новинка" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Panel />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Три раза — по одному на каждый рендер Panel. Литерал { color: "teal" } внутри разметки — это выражение, и вычисляется оно на каждом рендере заново. Каждый раз получается новый объект: поля совпадают, ссылка другая.

ts

const first = { color: "teal" };
const second = { color: "teal" };
// memo сравнивает пропсы этой же функцией
console.log(Object.is(first, second));
console.log(Object.is("новинка", "новинка"));

страница примера

Сначала предположите, что выведет код

Ровно это и видит memo: пропс style изменился, сравнение провалено, рендер идёт. То же с массивами (items={[]}), с результатом map и filter, с любой стрелочной функцией в разметке. Обёртка исправно работает — просто ей каждый раз подсовывают новые пропсы.

Строки, числа и булевы сравниваются по значению — с ними memo не подводит никогда. Ломается всё на объектах, массивах и функциях.

memo принимает вторым аргументом функцию сравнения. Соблазн понятен: сравним поля вручную и обойдёмся без useMemo. Цена — вы берёте на себя обязательство перечислить все пропсы, а забытый пропс превращается в компонент, который не обновляется никогда.

tsx

interface BadgeProps {
  style: { color: string };
  text: string;
}

function BadgeBase({ style, text }: BadgeProps) {
  console.log("рендер Badge:", text);
  return <span style={style}>{text}</span>;
}

// true означает «пропсы считаем одинаковыми, рендер не нужен» — легко
// перепутать знак и получить компонент, который не обновляется никогда
const Badge = React.memo(BadgeBase, (prev, next) => prev.text === next.text);

function Panel() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Badge style={{ color: "teal" }} text="новинка" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Panel />);
setTimeout(() => document.getElementById("inc")!.click(), 50);

страница примера

Сначала предположите, что выведет код

Здесь Badge перестал перерисовываться — и это правильно ровно до того дня, когда цвет начнёт зависеть от состояния. Обратите внимание и на знак: true означает «пропсы одинаковые, рендер не нужен» — противоположно привычному shouldComponentUpdate из старых классовых компонентов.

useMemo вызывает переданную функцию, запоминает результат и при следующих рендерах отдаёт запомненное — пока список зависимостей не изменится. Зависимости сравниваются так же поверхностно, элемент за элементом.

tsx

interface BadgeProps {
  style: { color: string };
  text: string;
}

const Badge = React.memo(function Badge({ style, text }: BadgeProps) {
  console.log("рендер Badge:", text);
  return <span style={style}>{text}</span>;
});

function Panel() {
  const [count, setCount] = React.useState(0);
  // зависимостей нет — значит, нет и повода делать новый объект
  const style = React.useMemo(() => ({ color: "teal" }), []);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Badge style={style} text="новинка" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Panel />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Один рендер Badge вместо трёх: style теперь один и тот же объект во всех рендерах, и сравнение в memo проходит. Пустой список зависимостей честен здесь потому, что внутри функции действительно нет ничего изменчивого — ни пропсов, ни состояния.

Вторая роль useMemo — не ссылка, а сам расчёт. Здесь сумма считается прямо в теле компонента. Сколько раз напечатается «считаем сумму» на двух кликах?

tsx

function sumOf(list: number[]) {
  console.log("считаем сумму");
  return list.reduce((acc, n) => acc + n, 0);
}

function Report() {
  const [count, setCount] = React.useState(0);
  // ленивая инициализация: массив создаётся один раз и переживает рендеры
  const [numbers] = React.useState(() => [1, 2, 3, 4, 5]);
  const total = sumOf(numbers);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <p>Сумма: {total}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Report />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Трижды: тело компонента — обычная функция, и всё, что в нём написано, выполняется на каждом рендере. Для суммы пяти чисел это ничто, но на месте sumOf может оказаться сортировка тысячи строк или разбор текста.

tsx

function sumOf(list: number[]) {
  console.log("считаем сумму");
  return list.reduce((acc, n) => acc + n, 0);
}

function Report() {
  const [count, setCount] = React.useState(0);
  const [numbers] = React.useState(() => [1, 2, 3, 4, 5]);
  // пересчёт только тогда, когда сменится сам массив
  const total = React.useMemo(() => sumOf(numbers), [numbers]);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <p>Сумма: {total}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Report />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Теперь расчёт один. Работает это только потому, что numbers стабилен: массив пришёл из useState и переживает рендеры. Объяви мы его литералом в теле компонента — зависимость менялась бы каждый раз, и useMemo пересчитывал бы всё заново, добавив к расчёту ещё и накладные расходы.

Функция внутри useMemo выполняется во время рендера — значит, она обязана быть чистой: никаких запросов, таймеров и правок DOM.

Стрелочная функция с фигурными скобками требует return — про это была речь ещё в «Стрелочных функциях». В useMemo такая опечатка особенно тиха: хук исправно работает и добросовестно запоминает undefined.

tsx

function sumOf(list: number[]) {
  return list.reduce((acc, n) => acc + n, 0);
}

function Report() {
  const [numbers] = React.useState(() => [1, 2, 3, 4, 5]);
  const total = React.useMemo(() => { sumOf(numbers); }, [numbers]);
  return <p>Сумма: {total}</p>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Report />);

страница примера

Сначала предположите, что выведет код

Компилятор указывает не на хук, а на восьмую строку — на разметку: «Тип "void" не может быть назначен для типа "ReactNode"». Тип возвращаемого значения useMemo выводится из вашей функции, а функция не возвращает ничего. Без типов ошибка дожила бы до браузера и обернулась пустым местом вместо суммы.

Функция — тоже объект, и с ней происходит ровно то же, что с литералом {}: каждый рендер рождает новую. Компонент обёрнут в memo, пропс всего один и на вид неизменный — но сколько будет строк «рендер Toolbar»?

tsx

interface ToolbarProps {
  onAdd: () => void;
}

const Toolbar = React.memo(function Toolbar({ onAdd }: ToolbarProps) {
  console.log("рендер Toolbar");
  return <button onClick={onAdd}>Добавить</button>;
});

function Board() {
  const [count, setCount] = React.useState(0);
  const onAdd = () => console.log("добавили задачу");
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Toolbar onAdd={onAdd} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Три. Лечится это useCallback — он запоминает саму функцию.

tsx

interface ToolbarProps {
  onAdd: () => void;
}

const Toolbar = React.memo(function Toolbar({ onAdd }: ToolbarProps) {
  console.log("рендер Toolbar");
  return <button onClick={onAdd}>Добавить</button>;
});

function Board() {
  const [count, setCount] = React.useState(0);
  // внутри функции нет ничего из рендера — список зависимостей честно пуст
  const onAdd = React.useCallback(() => console.log("добавили задачу"), []);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Toolbar onAdd={onAdd} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

useCallback(fn, deps) — это в точности useMemo(() => fn, deps): отдельный хук существует ради читаемости, чтобы не писать функцию, возвращающую функцию. Никакого второго механизма под ним нет.

А теперь главная ловушка обоих хуков. Пустой список зависимостей выглядит безобидно и снимает лишние рендеры — но что он делает с замыканием? Три клика по кнопке: какое число окажется на ней в конце и что напечатает обработчик?

tsx

function Counter() {
  const [count, setCount] = React.useState(0);
  console.log("рендер, count =", count);
  const inc = React.useCallback(() => {
    console.log("обработчик видит count =", count);
    setCount(count + 1);
  }, []);
  return <button id="inc" onClick={inc}>Нажато: {count}</button>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Counter />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);
setTimeout(() => document.getElementById("inc")!.click(), 250);

страница примера

Сначала предположите, что выведет код

Обработчик все три раза видит ноль, и счётчик застревает на единице. Ничего специфически реактового здесь нет: это замыкание из части I. useCallback с пустым списком сохранил функцию первого рендера, а вместе с ней — count первого рендера. Каждый клик просит установить 0 + 1, и после первого раза значение уже такое.

Повторная строка «рендер, count = 1» в выводе — не опечатка: получив заявку на то же самое значение, React один раз вызвал компонент, убедился, что состояние не изменилось, и дальше по дереву не пошёл. На третий клик он не стал делать и этого.

Починка — не в добавлении count в зависимости (тогда функция снова станет новой на каждом рендере, и memo опять бесполезен), а в том, чтобы перестать читать состояние: функция-обновитель получает прошлое значение от самого React.

tsx

function Counter() {
  const [count, setCount] = React.useState(0);
  console.log("рендер, count =", count);
  // обновителю прошлое значение приносит сам React, читать count не нужно —
  // и зависимостей у функции действительно нет
  const inc = React.useCallback(() => setCount((n) => n + 1), []);
  return <button id="inc" onClick={inc}>Нажато: {count}</button>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Counter />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);
setTimeout(() => document.getElementById("inc")!.click(), 250);

страница примера

Сначала предположите, что выведет код

Отсюда правило: список зависимостей — не место для творчества. Он описывает, что функция читает снаружи, и врать в нём нельзя. Если хочется удалить оттуда значение — сначала уберите чтение этого значения из функции, как здесь. Проверку берёт на себя правило exhaustive-deps из eslint-plugin-react-hooks; ставить его стоит раньше, чем первый useCallback.

Инструмент	Что оборачивает	Что сравнивает	Что экономит
`memo`	компонент	все пропсы, поверхностно	вызов компонента и рендер его поддерева
`useMemo`	вычисление	список зависимостей	повторный расчёт и новую ссылку
`useCallback`	функцию	список зависимостей	новую ссылку на функцию

Каждая строка этой таблицы — работа, которую React выполняет на каждом рендере: сравнить пропсы, сравнить зависимости, удержать в памяти прошлые значения. У компонента из пары узлов это сравнение вполне может стоить дороже, чем сам рендер, — и платить за него вы будете всегда: и когда мемоизация помогла, и когда нет.

Хуже другое: мемоизация заразна. memo сработает, только если стабильны все пропсы до единого. Один забытый объектный литерал обнуляет пользу от десятка useCallback выше по дереву — а обнаружить это можно только замером, потому что код выглядит правильным.

И ещё одно, о чём легко забыть: useMemo — оптимизация, а не гарантия. React вправе выбросить запомненное значение и посчитать заново. Поэтому на нём нельзя строить смысл программы: «создать ровно один экземпляр» — это useState(() => new Thing()) или useRef, но не useMemo.

Часть лишних рендеров снимается вообще без хуков — расстановкой компонентов. Приём знаком из «Что на самом деле тормозит»: элемент, созданный снаружи, приходит внутрь пропсом children и остаётся прежним объектом. Там он спасал список от флажка подсказки; здесь тот же ход заменяет memo. Сколько раз отрисуется Slow?

tsx

interface LayoutProps {
  children: React.ReactNode;
}

function Slow() {
  console.log("рендер Slow");
  return <p>Тяжёлый кусок разметки</p>;
}

function Layout({ children }: LayoutProps) {
  const [count, setCount] = React.useState(0);
  console.log("рендер Layout, count =", count);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      {children}
    </div>
  );
}

function App() {
  return (
    <Layout>
      <Slow />
    </Layout>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);

страница примера

Сначала предположите, что выведет код

Один раз, хотя ни memo, ни useMemo в коде нет. App на клик не перерисовывается, элемент <Slow /> создан там и не пересоздаётся, а Layout получает в children ту же ссылку — React сравнивает её и не идёт вглубь. Тот же приём, только не в хуках, а в форме компонентов.

Сначала измерьте, потом мемоизируйте. Мемоизация «на всякий случай» — это гарантированные расходы ради предполагаемой выгоды.

Всё это — ручная работа, которую легко сделать неправильно: забыть зависимость, обернуть не то, оставить memo на компоненте, куда прилетает свежий объект. Следующая статья про React Compiler показывает, как та же мемоизация появляется в сборке сама и уходит из вашего кода.

memo сравнивает пропсы поверхностно, через Object.is, и пропускает рендер компонента, если все они те же.
Объект, массив и функция, созданные в теле компонента, каждый рендер новые — из-за них memo чаще всего и не срабатывает.
useMemo хранит между рендерами значение, useCallback — функцию, и второе есть в точности первое: useCallback(fn, deps) — это useMemo(() => fn, deps).
Пустой список зависимостей замораживает вместе с функцией и все прочитанные ею значения; лечится функцией-обновителем, а не враньём в зависимостях.
Мемоизация не бесплатна: сравнение и память тратятся на каждом рендере, а один нестабильный пропс обнуляет всю цепочку.
Часть лишних рендеров снимается композицией: элемент, переданный через children, не пересоздаётся родителем и без всяких хуков.

1/4Компонент Badge обёрнут в memo и получает пропс style={{ color: "teal" }} — литерал прямо в разметке родителя. Родитель перерисовался из-за своего состояния. Что сделает Badge?

2/4Обработчик кнопки объявлен как const inc = React.useCallback(() => setCount(count + 1), []). Читатель нажимает кнопку три раза. Что покажет счётчик?

3/4Чем useCallback(fn, deps) отличается от useMemo(() => fn, deps)?

4/4Компонент обёрнут в memo, все его пропсы стабильны, но внутри он держит собственное состояние через useState. Вызван сеттер. Что произойдёт?

Починить memo

Card обёрнут в memo, но перерисовывается на каждый клик по соседней кнопке. Сделайте так, чтобы «рендер Card» напечаталось ровно один раз. Сам Card трогать нельзя — правьте только Page.

tsx

interface CardProps {
  user: { name: string };
  onPick: () => void;
}

const Card = React.memo(function Card({ user, onPick }: CardProps) {
  console.log("рендер Card");
  return <button onClick={onPick}>{user.name}</button>;
});

function Page() {
  const [count, setCount] = React.useState(0);
  const user = { name: "Рико" };
  const onPick = () => console.log("выбрали карточку");
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Card user={user} onPick={onPick} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Page />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 150);
// сейчас «рендер Card» печатается трижды, а нужно один раз

страница примера

Сначала предположите, что выведет код

Оба пропса — свежие объекты в каждом рендере: user собирается литералом, onPick рождается стрелочной функцией. Стабилизируем оба.

tsxлистинг · не запускается

function Page() {
  const [count, setCount] = React.useState(0);
  // ни то, ни другое не зависит от рендера — списки зависимостей пусты
  const user = React.useMemo(() => ({ name: "Рико" }), []);
  const onPick = React.useCallback(() => console.log("выбрали карточку"), []);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Card user={user} onPick={onPick} />
    </div>
  );
}

function Page() {
  const [count, setCount] = React.useState(0);
  // ни то, ни другое не зависит от рендера — списки зависимостей пусты
  const user = React.useMemo(() => ({ name: "Рико" }), []);
  const onPick = React.useCallback(() => console.log("выбрали карточку"), []);
  return (
    <div>
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
      <Card user={user} onPick={onPick} />
    </div>
  );
}

Достаточно пропустить один из двух — и «рендер Card» снова напечатается трижды: memo сравнивает все пропсы, и одного изменившегося хватает.

Если user вообще не зависит от компонента, есть решение проще любых хуков: вынести объект наружу, в модуль. Тогда он создаётся один раз при загрузке файла, и мемоизировать нечего.

Корзина, застрявшая в прошлом

После трёх кликов в корзине должно оказаться три товара, а оказывается один. Найдите причину и почините — не удаляя useCallback и не добавляя items в зависимости.

tsx

function Basket() {
  const [items, setItems] = React.useState<string[]>([]);
  console.log("в корзине:", items.length);
  const add = React.useCallback(() => {
    setItems([...items, "товар"]);
  }, []);
  return <button id="add" onClick={add}>Положить</button>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Basket />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => document.getElementById("add")!.click(), 150);
setTimeout(() => document.getElementById("add")!.click(), 250);
// после трёх кликов в корзине должно быть 3 товара

страница примера

Сначала предположите, что выведет код

useCallback с пустым списком зависимостей сохранил функцию первого рендера, а та замкнула пустой массив items. Каждый клик собирает новый массив из того самого пустого — и длина всегда равна единице.

Добавить items в зависимости можно, но тогда функция станет новой при каждом изменении корзины, и смысл useCallback испарится. Правильный ход — перестать читать состояние: прошлое значение приносит функция-обновитель.

jsлистинг · не запускается

const add = React.useCallback(() => {
  setItems((list) => [...list, "товар"]);
}, []);

const add = React.useCallback(() => {
  setItems((list) => [...list, "товар"]);
}, []);

Теперь пустой список зависимостей — правда, а не обещание: функция ничего не берёт из рендера. Тот же приём разбирался в «Функция-обновитель и очередь обновлений» — здесь он попутно чинит и мемоизацию.

Лишняя мемоизация

Запустите пример, затем удалите оба хука мемоизации и запустите снова: вывод не изменится ни на строку. Объясните, почему здесь они не дают ничего.

tsx

function Price() {
  const [count, setCount] = React.useState(1);
  const price = 250;
  const total = React.useMemo(() => price * count, [count]);
  const onClick = React.useCallback(() => setCount((n) => n + 1), []);
  console.log("рендер, итого =", total);
  return (
    <div>
      <button id="more" onClick={onClick}>Ещё один</button>
      <p>Итого: {total}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Price />);
setTimeout(() => document.getElementById("more")!.click(), 50);
setTimeout(() => document.getElementById("more")!.click(), 150);

страница примера

Сначала предположите, что выведет код

useMemo запоминает результат умножения — операции, которая дешевле, чем сравнение списка зависимостей вокруг неё. Чистый расход: память под прошлое значение плюс сравнение count на каждом рендере.

useCallback отдаёт стабильную функцию — но получает её обычный <button>, а не компонент под memo. Узлам DOM стабильность обработчика безразлична: React не переподписывает слушатели на каждый рендер, у него один общий слушатель на корень (об этом было в «Обработчики в JSX против addEventListener»).

tsxлистинг · не запускается

function Price() {
  const [count, setCount] = React.useState(1);
  const price = 250;
  const total = price * count;
  console.log("рендер, итого =", total);
  return (
    <div>
      <button onClick={() => setCount((n) => n + 1)}>Ещё один</button>
      <p>Итого: {total}</p>
    </div>
  );
}

function Price() {
  const [count, setCount] = React.useState(1);
  const price = 250;
  const total = price * count;
  console.log("рендер, итого =", total);
  return (
    <div>
      <button onClick={() => setCount((n) => n + 1)}>Ещё один</button>
      <p>Итого: {total}</p>
    </div>
  );
}

Вывод тот же самый — три строки с теми же числами, — а работы на рендере стало меньше. Мемоизация окупается там, где за ней стоит либо тяжёлый расчёт, либо memo на дочернем компоненте.

memo, useMemo и useCallback: что они делают

Видеоразбор темы за 5–7 минут

memo: пропустить рендер, если пропсы те жеЧто именно сравнивает обёртка и кого она защищает

Почему memo так часто не срабатываетОбъект и функция, рождённые заново в каждом рендере

useMemoТа же ссылка между рендерами — и расчёт только по делу

useCallbackТа же функция — и ловушка с устаревшим значением

Цена мемоизацииЗа что платите и когда можно не платить вовсе

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Починить memo

Корзина, застрявшая в прошлом

Лишняя мемоизация