Что на самом деле тормозит

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

В статье «Триггер, рендер, коммит» три шага уже разложены: React принимает заявку, вызывает функции компонентов и только потом правит DOM. Слово «перерисовка» склеивает их обратно, а вместе с ними склеивает и цену: вызов небольшой функции стоит микросекунды, правка DOM — на порядки больше. Начнём с примера, который показывает, чего в перерисовке нет. Три клика подряд, а потом сверяем узел <p>, запомненный до кликов, с тем, что лежит в документе сейчас.

tsx

interface CellProps {
  value: number;
}

function Cell({ value }: CellProps) {
  console.log("рендер Cell, value =", value);
  return <p id="cell">Значение: {value}</p>;
}

function App() {
  const [value, setValue] = React.useState(0);
  return (
    <div>
      <Cell value={value} />
      <button id="inc" onClick={() => setValue((v) => v + 1)}>+1</button>
    </div>
  );
}

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

setTimeout(() => {
  // узел запоминается ДО кликов, чтобы сравнить его с тем, что окажется на месте после обновления
  const before = document.getElementById("cell");
  const button = document.getElementById("inc")!;
  button.click();
  button.click();
  button.click();
  // клик только подаёт заявку, поэтому смотрим результат следующим тактом
  setTimeout(() => {
    const after = document.getElementById("cell")!;
    console.log("тот же узел:", before === after);
    console.log("текст:", after.textContent);
  }, 0);
}, 50);

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

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

Узел тот же самый — React поменял в нём только текст. И вызовов функции оказалось два, а не четыре: три клика подряд попали в одну очередь обновлений («Функция-обновитель и очередь обновлений»), поэтому рендер после них был один — зато сразу с тройкой, потому что каждый клик отправлял функцию-обновитель, а не готовое число. Сравните с частью II: там ваш render() собирал разметку строкой и вставлял её в innerHTML, после чего все узлы были новыми — вместе с потерянным фокусом в поле и сброшенным выделением («Рендер из состояния и делегирование»). React вызывает вашу функцию, чтобы узнать, что должно быть на экране, и правит ровно расхождение.

«Компонент перерисовался» в React значит «его функцию вызвали». Это не то же самое, что «браузер что-то перерисовал».

Отсюда установка, с которой стоит подходить к любой оптимизации: сам факт лишнего вызова компонента — не беда. Беда — работа, которую этот вызов делает. Дальше учимся видеть и то и другое.

Первый вопрос при любом торможении — кто вообще выполняется. Отвечает на него не догадка, а счётчик: общий объект, куда каждый компонент отмечается в начале своего вызова. Ниже 24 карточки каталога и кнопка лайков в шапке; карточки о лайках не знают ничего. Сколько раз выполнится Card после одного клика?

tsx

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

function Header() {
  tick("Header");
  return <h3>Каталог</h3>;
}

const titles: string[] = [];
for (let i = 1; i <= 24; i += 1) titles.push("Товар " + i);

function App() {
  tick("App");
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <Header />
      <button id="like" onClick={() => setLikes(likes + 1)}>Лайков: {likes}</button>
      <ul>
        {titles.map((title) => (
          <Card key={title} title={title} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  console.log("первая отрисовка:", renders);
  document.getElementById("like")!.click();
  // счётчик читаем следующим тактом: клик подаёт заявку, а не рисует
  setTimeout(() => console.log("после клика:  ", renders), 0);
}, 50);

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

function Header() {
  tick("Header");
  return <h3>Каталог</h3>;
}

const titles: string[] = [];
for (let i = 1; i <= 24; i += 1) titles.push("Товар " + i);

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

setTimeout(() => {
  console.log("первая отрисовка:", renders);
  document.getElementById("like")!.click();
  // счётчик читаем следующим тактом: клик подаёт заявку, а не рисует
  setTimeout(() => console.log("после клика:  ", renders), 0);
}, 50);

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

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

Сорок восемь. Что React не сравнивает пропсы перед вызовом, разобрано в статье про три шага; ново здесь не правило, а его цена в числах. При этом в DOM карточек не поменялось ни байта: описания совпали, коммит их не тронул. Двадцать четыре вызова ради нуля изменений — вот та «лишняя работа», о которой идёт речь во всей главе.

Клик подаёт заявку, а не рисует: счётчик читаем следующим тактом, через вложенный setTimeout. Иначе увидим числа до перерисовки.

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

Сколько стоят те 24 вызова? Функция Card создаёт один объект-описание и возвращает его: на все двадцать четыре уходят доли миллисекунды. Теперь дадим каждой карточке немного настоящей работы — такой, какой в жизни бывает сортировка, разбор дат или пересчёт итогов.

tsx

let calls = 0;
let spent = 0;

// имитация настоящей работы: примерно столько же стоит разбор дат
// или сортировка сотни объектов на каждой карточке
function score(seed: number): number {
  const started = Date.now();
  let acc = 0;
  for (let i = 0; i < 500000; i += 1) acc += Math.sqrt(seed * i);
  calls += 1;
  spent += Date.now() - started;
  return Math.round(acc);
}

interface CardProps {
  index: number;
}

function Card({ index }: CardProps) {
  return (
    <li>
      Товар {index}: {score(index)}
    </li>
  );
}

const indexes: number[] = [];
for (let i = 1; i <= 24; i += 1) indexes.push(i);

function App() {
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <button id="like" onClick={() => setLikes(likes + 1)}>Лайков: {likes}</button>
      <ul>
        {indexes.map((index) => (
          <Card key={index} index={index} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  // миллисекунды зависят от машины: у вас числа будут свои
  console.log("первая отрисовка — вызовов score:", calls, "мс:", spent);
  document.getElementById("like")!.click();
  setTimeout(() => {
    console.log("после одного клика — вызовов score:", calls, "мс:", spent);
  }, 0);
}, 50);

let calls = 0;
let spent = 0;

// имитация настоящей работы: примерно столько же стоит разбор дат
// или сортировка сотни объектов на каждой карточке
function score(seed: number): number {
  const started = Date.now();
  let acc = 0;
  for (let i = 0; i < 500000; i += 1) acc += Math.sqrt(seed * i);
  calls += 1;
  spent += Date.now() - started;
  return Math.round(acc);
}

interface CardProps {
  index: number;
}

function Card({ index }: CardProps) {
  return (
    <li>
      Товар {index}: {score(index)}
    </li>
  );
}

const indexes: number[] = [];
for (let i = 1; i <= 24; i += 1) indexes.push(i);

function App() {
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <button id="like" onClick={() => setLikes(likes + 1)}>Лайков: {likes}</button>
      <ul>
        {indexes.map((index) => (
          <Card key={index} index={index} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  // миллисекунды зависят от машины: у вас числа будут свои
  console.log("первая отрисовка — вызовов score:", calls, "мс:", spent);
  document.getElementById("like")!.click();
  setTimeout(() => {
    console.log("после одного клика — вызовов score:", calls, "мс:", spent);
  }, 0);
}, 50);

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

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

Точные числа на вашей машине будут другими, но соотношение важнее их. Ориентир простой: при 60 кадрах в секунду у браузера есть примерно 16 мс на кадр. Клик по кнопке, которая меняет одно число в шапке, съел здесь весь этот бюджет целиком — и это на двух дюжинах карточек и на ноутбуке. Цена растёт вместе со списком и падает вместе с быстротой машины: сотня карточек на технике послабее — и тот же клик уходит за сто миллисекунд, а сто миллисекунд читатель уже чувствует как задержку.

Обратите внимание, что изменилось между разделами: количество вызовов осталось прежним — 24 на каждую перерисовку. Дорогим стало не «перерисовалось много компонентов», а «на каждый вызов приходится тяжёлый расчёт». Ускорять здесь нужно не React, а свой код: убрать расчёт из тела компонента или считать его один раз.

Что видно	Что за этим стоит	Куда смотреть
Один клик подвешивает страницу на десятые доли секунды	тяжёлый расчёт в теле компонента	убрать расчёт из рендера или закешировать (следующая статья)
Список дёргается при каждом нажатии клавиши	состояние поля лежит выше, чем нужно	раздел «Состояние живёт слишком высоко»
Тормозит только на списке в тысячи строк	дорог не рендер, а коммит и сам DOM	показывать окно списка (виртуализация) или страницы
Тормозит только у вас в разработке	dev-сборка React делает много лишнего, а StrictMode вызывает компоненты дважды	мерить на прод-сборке

Перед оптимизацией задавайте вопрос «сколько миллисекунд?». Без числа улучшение не отличить от суеверия.

Чаще всего лишняя работа берётся не из React, а из схемы состояния. После статьи «Подъём состояния» легко привыкнуть держать всё в App: так удобнее передавать вниз. Плата — любое изменение перерисовывает всё дерево. Здесь флажок подсказки лежит в App; сколько раз выполнится Card после одного переключения?

tsx

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

const titles = ["Хлеб", "Молоко", "Кофе", "Сыр", "Чай", "Мёд"];

function App() {
  tick("App");
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <button id="toggle" onClick={() => setOpen(!open)}>Подсказка</button>
      {open && <p>Нажмите на товар, чтобы отложить его</p>}
      <ul>
        {titles.map((title) => (
          <Card key={title} title={title} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  document.getElementById("toggle")!.click();
  // клик подаёт заявку, поэтому счётчик читаем следующим тактом
  setTimeout(() => console.log(renders), 0);
}, 50);

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

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

Шесть карточек выполнились второй раз, чтобы вернуть ровно то же самое. React не «не догадался» — состояние open просто лежит не там: читает его только сама подсказка. Переносим состояние вниз, в отдельный компонент.

tsx

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

const titles = ["Хлеб", "Молоко", "Кофе", "Сыр", "Чай", "Мёд"];

// состояние переехало к тому единственному, кто его читает
function Hint() {
  tick("Hint");
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <button id="toggle" onClick={() => setOpen(!open)}>Подсказка</button>
      {open && <p>Нажмите на товар, чтобы отложить его</p>}
    </div>
  );
}

function App() {
  tick("App");
  return (
    <div>
      <Hint />
      <ul>
        {titles.map((title) => (
          <Card key={title} title={title} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  document.getElementById("toggle")!.click();
  // клик подаёт заявку, поэтому счётчик читаем следующим тактом
  setTimeout(() => console.log(renders), 0);
}, 50);

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

const titles = ["Хлеб", "Молоко", "Кофе", "Сыр", "Чай", "Мёд"];

// состояние переехало к тому единственному, кто его читает
function Hint() {
  tick("Hint");
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <button id="toggle" onClick={() => setOpen(!open)}>Подсказка</button>
      {open && <p>Нажмите на товар, чтобы отложить его</p>}
    </div>
  );
}

function App() {
  tick("App");
  return (
    <div>
      <Hint />
      <ul>
        {titles.map((title) => (
          <Card key={title} title={title} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  document.getElementById("toggle")!.click();
  // клик подаёт заявку, поэтому счётчик читаем следующим тактом
  setTimeout(() => console.log(renders), 0);
}, 50);

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

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

Тот же клик, тот же результат на экране — и ни одного лишнего вызова: App вообще не перерисовался, потому что его состояние не менялось, а рендер идёт вниз от того, кто подал заявку. Это правило из раздела «Как высоко поднимать» той же статьи о подъёме состояния: состояние поднимают до ближайшего общего родителя тех, кому оно нужно, — и ни на шаг выше.

Бывает, что состояние обязано быть в обёртке: панель сама решает, свёрнута она или нет, а внутри неё — чужое содержимое. Тогда содержимое отдают через children, и создаёт его тот, кто не перерисовывается.

tsx

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

const titles = ["Хлеб", "Молоко", "Кофе", "Сыр", "Чай", "Мёд"];

interface PanelProps {
  children: React.ReactNode;
}

function Panel({ children }: PanelProps) {
  tick("Panel");
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <button id="toggle" onClick={() => setOpen(!open)}>Подсказка</button>
      {open && <p>Нажмите на товар, чтобы отложить его</p>}
      {children}
    </div>
  );
}

function App() {
  tick("App");
  return (
    <Panel>
      <ul>
        {titles.map((title) => (
          <Card key={title} title={title} />
        ))}
      </ul>
    </Panel>
  );
}

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

setTimeout(() => {
  document.getElementById("toggle")!.click();
  // клик подаёт заявку, поэтому счётчик читаем следующим тактом
  setTimeout(() => console.log(renders), 0);
}, 50);

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  tick("Card");
  return <li>{title}</li>;
}

const titles = ["Хлеб", "Молоко", "Кофе", "Сыр", "Чай", "Мёд"];

interface PanelProps {
  children: React.ReactNode;
}

function App() {
  tick("App");
  return (
    <Panel>
      <ul>
        {titles.map((title) => (
          <Card key={title} title={title} />
        ))}
      </ul>
    </Panel>
  );
}

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

setTimeout(() => {
  document.getElementById("toggle")!.click();
  // клик подаёт заявку, поэтому счётчик читаем следующим тактом
  setTimeout(() => console.log(renders), 0);
}, 50);

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

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

Panel выполнился дважды, карточки — по разу. Элемент, который лежит в children, создан в App, а App заявку не подавал: React видит в пропсе тот же самый объект-описание, что и в прошлый раз, и целиком пропускает это поддерево. Никакого memo — только перестановка.

Расставлять console.log руками надоедает на третьем компоненте, а счётчик хочется видеть по каждому компоненту отдельно. Измерение — это логика без разметки, то есть ровно тот случай, ради которого пишут свой хук («Свой хук: логика без разметки»).

tsx

function useRenderCount(name: string): void {
  const count = React.useRef(0);
  // ref меняется прямо в теле рендера: для отладочного счётчика это допустимо,
  // потому что на результат он не влияет — но в боевом коде так не пишут
  count.current += 1;
  console.log(name, "— рендер №", count.current);
}

interface TitleProps {
  text: string;
}

function Title({ text }: TitleProps) {
  useRenderCount("Title");
  return <h3>{text}</h3>;
}

function App() {
  useRenderCount("App");
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Title text="Счётчик" />
      <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>
    </div>
  );
}

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

setTimeout(() => {
  document.getElementById("inc")!.click();
}, 50);

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

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

Профайлер React DevTools и галочка «Highlight updates when components render» в настройках вкладки Components знакомы по той же статье про три шага: там ими отвечали на вопрос «кто перерисовался». На вопрос «сколько это стоило» отвечает тот же профайлер: он записывает коммиты и показывает, сколько миллисекунд занял каждый компонент и почему он перерисовался. Вкладка Performance браузера смотрит грубее, зато на всё сразу — по ней видно, когда упёрлось не в React, а в стили, разметку или картинки.

Мерить нужно на сборке для прода. В разработке React проверяет ваш код и ведёт подробные предупреждения, а <StrictMode> вдобавок намеренно вызывает функции компонентов дважды, чтобы поймать нечистый рендер: счётчик покажет 48 там, где в проде будет 24. Про примеры этой статьи это стоит сказать прямо: <StrictMode> в песочнице нет, поэтому счётчикам верить можно — двадцать четыре вызова здесь и есть двадцать четыре. А React в ней собран отладочный, нарочно: учебнику нужны полные тексты его предупреждений. Поэтому миллисекунды выше — это миллисекунды отладочной сборки, и в проде они будут меньше.

И порядок действий, а не набор приёмов: измерить → найти работу, которой могло не быть → убрать её структурой (состояние ниже, поддерево через children, расчёт за пределами компонента) → и только если после этого числа всё ещё плохие, браться за memo и useMemo, о которых следующая статья.

«Перерисовался» в React значит «его функцию вызвали»; DOM трогает только коммит и только там, где описания разошлись.
React вызывает детей, не сравнивая пропсы: вызов дешёвой функции обычно дешевле, чем проверка, нужен ли он.
Считать вызовы можно объектом-счётчиком и console.log; читать счётчик надо следующим тактом, потому что клик лишь подаёт заявку.
Дорого не количество вызовов, а работа внутри них: ориентир — 16 мс на кадр, и без миллисекунд разговор об оптимизации бессмыслен.
Самая частая причина лишней работы — состояние, поднятое выше, чем нужно; лечится переносом состояния вниз или передачей поддерева через children.
Мерить нужно на прод-сборке: в разработке React медленнее, а под StrictMode компоненты вызываются дважды.

1/4Функция компонента выполнилась заново, и значение на экране изменилось. Что произошло с его узлом <p> в документе?

2/4Счётчик показал: один клик по кнопке в шапке — 24 вызова Card, и ни одного изменения в DOM карточек. Что это значит?

3/4Из-за чего клик чаще всего становится заметно медленным?

4/4Флажок open лежит в App, и каждое переключение перерисовывает список из шести карточек. Что уберёт лишнюю работу, не прибегая к memo?

Посчитайте вызовы

Кнопка переключает тему, список из трёх строк к теме отношения не имеет. Добавьте счётчик рендеров и напечатайте его после клика: сколько раз выполнятся App и Row? Сначала запишите свой ответ, потом проверьте.

tsx

interface RowProps {
  text: string;
}

function Row({ text }: RowProps) {
  return <li>{text}</li>;
}

const rows = ["один", "два", "три"];

function App() {
  const [dark, setDark] = React.useState(false);
  return (
    <div>
      <button id="theme" onClick={() => setDark(!dark)}>
        Тема: {dark ? "тёмная" : "светлая"}
      </button>
      <ul>
        {rows.map((text) => (
          <Row key={text} text={text} />
        ))}
      </ul>
    </div>
  );
}

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

setTimeout(() => {
  document.getElementById("theme")!.click();
  // ваш код: напечатайте, сколько раз выполнились App и Row
}, 50);

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

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

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

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

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

function Row({ text }: RowProps) {
  tick("Row");
  return <li>{text}</li>;
}

// ... в App тоже tick("App")

setTimeout(() => {
  document.getElementById("theme")!.click();
  setTimeout(() => console.log(renders), 0); // { App: 2, Row: 6 }
}, 50);

const renders: Record<string, number> = {};

function tick(name: string): void {
  renders[name] = (renders[name] || 0) + 1;
}

function Row({ text }: RowProps) {
  tick("Row");
  return <li>{text}</li>;
}

// ... в App тоже tick("App")

setTimeout(() => {
  document.getElementById("theme")!.click();
  setTimeout(() => console.log(renders), 0); // { App: 2, Row: 6 }
}, 50);

Шесть — это три строки на первую отрисовку и три после клика. Ни одна строка не изменилась, но React вызвал их все: он не сравнивает пропсы перед вызовом. Пока в Row ничего не считается, эти три вызова ничего не стоят.

Опустите состояние

Запустите пример и наберите в поле пару букв, глядя на вывод: каждое нажатие клавиши перерисовывает весь список. Переставьте состояние так, чтобы ввод не трогал Item. Разметка на экране должна остаться прежней.

tsx

interface ItemProps {
  text: string;
}

function Item({ text }: ItemProps) {
  console.log("рендер Item:", text);
  return <li>{text}</li>;
}

function App() {
  const [items, setItems] = React.useState(["Купить хлеб", "Позвонить маме"]);
  const [draft, setDraft] = React.useState("");
  return (
    <div>
      <input
        value={draft}
        placeholder="новая задача"
        onChange={(event) => setDraft(event.target.value)}
      />
      <button onClick={() => { setItems([...items, draft]); setDraft(""); }}>Добавить</button>
      <ul>
        {items.map((text) => (
          <Item key={text} text={text} />
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
// наберите в поле пару букв и посмотрите на вывод

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

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

Черновик читает только форма — значит, там ему и место. Список остаётся в App, потому что его меняет добавление.

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

interface AddFormProps {
  onAdd: (text: string) => void;
}

function AddForm({ onAdd }: AddFormProps) {
  const [draft, setDraft] = React.useState("");
  return (
    <div>
      <input value={draft} onChange={(event) => setDraft(event.target.value)} />
      <button onClick={() => { onAdd(draft); setDraft(""); }}>Добавить</button>
    </div>
  );
}

function App() {
  const [items, setItems] = React.useState(["Купить хлеб", "Позвонить маме"]);
  return (
    <div>
      <AddForm onAdd={(text) => setItems([...items, text])} />
      <ul>{items.map((text) => <Item key={text} text={text} />)}</ul>
    </div>
  );
}

interface AddFormProps {
  onAdd: (text: string) => void;
}

function AddForm({ onAdd }: AddFormProps) {
  const [draft, setDraft] = React.useState("");
  return (
    <div>
      <input value={draft} onChange={(event) => setDraft(event.target.value)} />
      <button onClick={() => { onAdd(draft); setDraft(""); }}>Добавить</button>
    </div>
  );
}

function App() {
  const [items, setItems] = React.useState(["Купить хлеб", "Позвонить маме"]);
  return (
    <div>
      <AddForm onAdd={(text) => setItems([...items, text])} />
      <ul>{items.map((text) => <Item key={text} text={text} />)}</ul>
    </div>
  );
}

Теперь при вводе перерисовывается только AddForm: в выводе не появляется ни одной новой строки, пока вы не нажали «Добавить». Обратите внимание, что списку не понадобился ни memo, ни какая-либо обёртка — хватило того, что состояние переехало на свой этаж.

Работа не на своём месте

Список часов собирается заново при каждом рендере Picker, хотя не зависит ни от пропсов, ни от состояния. Уберите эту работу из рендера, не прибегая к мемоизации.

tsx

interface PickerProps {
  value: string;
  onPick: (next: string) => void;
}

function Picker({ value, onPick }: PickerProps) {
  const hours: string[] = [];
  for (let h = 0; h < 24; h += 1) hours.push(String(h).padStart(2, "0") + ":00");
  return (
    <select value={value} onChange={(event) => onPick(event.target.value)}>
      {hours.map((hour) => (
        <option key={hour} value={hour}>{hour}</option>
      ))}
    </select>
  );
}

function App() {
  const [time, setTime] = React.useState("09:00");
  return (
    <div>
      <Picker value={time} onPick={setTime} />
      <p>Встреча в {time}</p>
    </div>
  );
}

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

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

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

Если значение не зависит ни от чего внутри компонента, ему незачем жить внутри компонента. Модульная константа считается один раз за всю жизнь страницы.

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

const HOURS: string[] = [];
for (let h = 0; h < 24; h += 1) HOURS.push(String(h).padStart(2, "0") + ":00");

function Picker({ value, onPick }: PickerProps) {
  return (
    <select value={value} onChange={(event) => onPick(event.target.value)}>
      {HOURS.map((hour) => (
        <option key={hour} value={hour}>{hour}</option>
      ))}
    </select>
  );
}

const HOURS: string[] = [];
for (let h = 0; h < 24; h += 1) HOURS.push(String(h).padStart(2, "0") + ":00");

function Picker({ value, onPick }: PickerProps) {
  return (
    <select value={value} onChange={(event) => onPick(event.target.value)}>
      {HOURS.map((hour) => (
        <option key={hour} value={hour}>{hour}</option>
      ))}
    </select>
  );
}

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

Что на самом деле тормозит

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

Перерисовка — это вызов функцииЧто React делает по заявке, а чего не делает

Считаем вызовыИнструмент из трёх строк: кто и сколько раз выполнился

Где на самом деле уходит времяПочему дорого не количество вызовов, а работа внутри

Состояние живёт слишком высокоСамая частая причина: перерисовывается то, что не менялось

Чем мерить, кроме console.logХук-счётчик, профайлер и почему dev-сборка врёт

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

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

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

Посчитайте вызовы

Опустите состояние

Работа не на своём месте