Зависимости и устаревшие значения

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

Таймер — самый простой «внешний мир», с которым эффект синхронизирует компонент. Компонент ниже заводит интервал один раз, при появлении на экране, и каждые сто миллисекунд просит увеличить счёт. Прежде чем нажимать Run, запишите два числа: сколько тиков напечатает пример и что будет на экране через семьсот миллисекунд.

tsx

function Ticker() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("эффект запущен, count =", count);
    const id = setInterval(() => {
      console.log("тик: просим поставить", count + 1);
      setCount(count + 1);
    }, 100);
    setTimeout(() => clearInterval(id), 550);
  }, []);
  return <p>Тиков: {count}</p>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Ticker />);
setTimeout(() => console.log("на экране:", document.querySelector("p")!.textContent), 700);

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

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

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

Каждый тик честно вычисляет 0 + 1 и просит поставить единицу. В первый раз React соглашается и перерисовывает компонент. Новая отрисовка создаёт новый эффект — с новой стрелкой и count = 1, — но запускать его React не станет: массив зависимостей пуст, сравнивать нечего, старый эффект остаётся в силе. Старый интервал продолжает крутиться со старым нулём, и четыре следующих тика просят поставить всё ту же единицу.

В части II этой ловушки не было: интервал читал state.count из живого объекта и всегда видел свежее число. React заменил живой объект снимками — и интервал, созданный один раз, застрял в первом из них.

В обсуждениях это зовут «устаревшим замыканием» — stale closure. Ничего не устарело: замыкание работает ровно как в части I. Устарело наше представление о том, какой count оно видит.

Второй аргумент useEffect хочется прочитать как расписание: «запускай, когда изменится вот это». Точнее другое прочтение: это перечень всего, что эффект берёт из отрисовки. После каждой отрисовки React сравнивает новый перечень с тем, при котором эффект запускался в прошлый раз, — поэлементно, через Object.is. Совпал — новый эффект не нужен, старый всё ещё смотрит на верные значения. Разошёлся — старый смотрит в прошлое, и React запускает новый.

Три формы второго аргумента — три разных договора. Компонент ниже держит два состояния и три эффекта, каждый печатает снимок, который видит. Клики идут по расписанию: +1, затем смена темы, затем снова +1. Посчитайте, сколько строк напечатает каждый эффект.

tsx

function Panel() {
  const [count, setCount] = React.useState(0);
  const [theme, setTheme] = React.useState("light");
  React.useEffect(() => {
    console.log("без массива:", count, theme);
  });
  React.useEffect(() => {
    console.log("пустой массив:", count, theme);
  }, []);
  React.useEffect(() => {
    console.log("[count]:", count, theme);
  }, [count]);
  return (
    <div>
      <p>
        {count}, тема {theme}
      </p>
      <button id="inc" onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button id="dark" onClick={() => setTheme("dark")}>
        тёмная
      </button>
    </div>
  );
}

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

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

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

Восемь строк. Эффект без массива запустился после каждой из четырёх отрисовок. Эффект с пустым массивом — один раз, после первой. Эффект с [count] — трижды: смену темы он пропустил, потому что count в ней не изменился.

Второй аргумент	Когда запускается	Какой снимок видит
нет	после каждой отрисовки	всегда свежий
`[]`	один раз, после первой отрисовки	первый — навсегда
`[count]`	после первой и после каждой, где `count` стал другим	последней отрисовки, где `count` менялся

Присмотритесь к третьему эффекту. Он печатает theme, но не перечисляет её. После смены темы он промолчал — а будь на месте console.log запрос или подписка, они бы работали с темой light до следующего изменения счёта. Список соврал, и вранью ничего не помешало: ни ошибки, ни предупреждения. React не читает тело эффекта, он верит списку. Отсюда и правило: перечислять не «когда перезапускать», а «всё, что читаете».

Зависимости — не оптимизация, которую вы выбираете. Это описание эффекта, из которого React сам выводит, когда старый экземпляр ещё годен.

Вернёмся к застрявшему счётчику. Способа два, и они противоположны: либо эффект перестаёт читать count, и пустой массив становится честным, либо перечисляет count и перезапускается при каждом изменении.

Первый способ — функция-обновитель из статьи про очередь обновлений. setCount(c => c + 1) не читает снимок: текущее значение ей передаст React в момент применения. Сама setCount у одного состояния одна на всю жизнь компонента, её перечислять не требуется.

tsx

function Ticker() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    // count в теле эффекта больше не упоминается — даже в console.log
    console.log("эффект запущен");
    const id = setInterval(() => {
      // обновитель не читает снимок: текущее значение подставит React
      setCount((c) => c + 1);
    }, 100);
    setTimeout(() => clearInterval(id), 550);
  }, []);
  return <p>Тиков: {count}</p>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Ticker />);
setTimeout(() => console.log("на экране:", document.querySelector("p")!.textContent), 700);

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

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

Пять тиков — пятёрка на экране, и эффект по-прежнему запущен один раз. Устаревать здесь нечему: эффект не держит ни одного значения из отрисовки, и пустой массив говорит чистую правду.

Тоже работает — но по-другому. Эффект перезапускается после каждого тика: старый интервал останавливается, новый заводится уже с новым count. Остановка — это функция, которую эффект возвращает; следующая статья целиком о ней, здесь она нужна, чтобы интервалы не копились.

tsx

function Ticker() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("эффект запущен, count =", count);
    if (count >= 5) return;
    const id = setInterval(() => setCount(count + 1), 100);
    // старый интервал надо остановить, иначе после каждого тика их станет на один больше
    return () => clearInterval(id);
  }, [count]);
  return <p>Тиков: {count}</p>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Ticker />);
setTimeout(() => console.log("на экране:", document.querySelector("p")!.textContent), 800);

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

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

Шесть строк «эффект запущен» вместо одной. Список честный, значение свежее, цена — пересоздание интервала на каждый тик. Для интервала это терпимо, для подписки на сокет или запроса к серверу — уже расточительно.

Правило выбора простое. Если значение нужно эффекту только чтобы изменить состояние — берите обновитель. Если эффект должен значение увидеть — подписаться на канал с этим именем, запросить данные под этот фильтр, — перечисляйте и перезапускайте. Есть и третий случай: значение нужно видеть, но перезапускать эффект из-за него нельзя. Для него в React есть отдельный инструмент, useEffectEvent, — о нём пятая статья главы.

После части III хочется, чтобы ошибку поймал компилятор. Здесь его хватает не на всё. Типы useEffect описывают форму: первый аргумент — функция, второй — DependencyList, то есть массив только для чтения, либо ничего. Передайте вместо массива число — и диагностика будет настоящей.

tsx

interface TitleProps {
  count: number;
}

function Title({ count }: TitleProps) {
  React.useEffect(() => {
    document.title = `Задач: ${count}`;
  }, count);
  return <p>Задач: {count}</p>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Title count={3} />);
setTimeout(() => console.log("заголовок:", document.title), 100);

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

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

Компилятор недоволен строкой с count: «Аргумент типа "number" нельзя назначить параметру типа "readonly unknown[]"» — DependencyList он раскрывает до того, чем этот псевдоним объявлен. Но код всё равно выполняется, и заголовок ставится: на первой отрисовке любой второй аргумент срабатывает одинаково. Первая строка вывода при этом не наша, а React: песочница собирает его отладочной сборкой, поэтому предупреждение про «не массив» видно здесь так же, как будет видно у вас в проекте.

А вот [] при эффекте, читающем count, для системы типов безупречен: замыкание над числом — корректная программа, и никакого типа «устаревшее число» не существует. Что лежит внутри массива и чего там не хватает, компилятору безразлично.

Содержимое списка проверяет линтер — правило react-hooks/exhaustive-deps из пакета eslint-plugin-react-hooks: это плагин к тому же ESLint, конфиг которого разбирала статья «typescript-eslint: правила, которых нет у компилятора». Правило читает тело эффекта, собирает всё, что тот берёт из отрисовки, и сверяет со вторым аргументом. Пропустили — предупреждение с именем пропущенного. В песочнице учебника линтера нет, в редакторе он у вас будет, поэтому стоит знать, что он считает «реактивным значением».

Что читает эффект	Должно быть в списке	Почему
пропс или состояние	да	меняется от отрисовки к отрисовке
переменная, вычисленная в теле компонента	да	новая при каждом вызове компонента
функция `set…` из `useState`	нет	одна и та же на всю жизнь компонента
объект из `useRef`	нет	тот же объект в каждой отрисовке
переменная модуля вне компонента	нет	от отрисовки не зависит
`document`, `window`, импорты	нет	к React отношения не имеют

Первый порыв при предупреждении — выключить правило комментарием. Это то же самое, что соврать React: линтер не требует «перезапускать почаще», он сообщает, что эффект видит значение, о котором вы умолчали. Правильных ответов три, и все они меняют код, а не комментарий: перестать читать значение, перечислить его или вынести в useEffectEvent.

Линтер знает о стабильных значениях: setCount и объект из useRef перечислять не заставит — но и перечислить их не запретит.

Object.is сравнивает примитивы по значению, а объекты — по ссылке; два одинаковых литерала — два разных объекта, это часть I. В теле компонента это стреляет неожиданно: литерал, написанный в коде один раз, создаётся заново при каждом вызове функции — то есть при каждой отрисовке.

ts

const a = { limit: 10, lang: "ru" };
const b = { limit: 10, lang: "ru" };
console.log(Object.is(a, b));
console.log(Object.is(a.limit, b.limit));
console.log(Object.is(a.lang, b.lang));

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

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

Компонент ниже собирает настройки поиска в объект и кладёт его в зависимости. Кнопка «просто клик» меняет состояние, к поиску не относящееся. Сколько раз сработает эффект?

tsx

function Search() {
  const [query, setQuery] = React.useState("");
  const [clicks, setClicks] = React.useState(0);
  const options = { limit: 10, lang: "ru" };
  React.useEffect(() => {
    console.log("эффект: ищем", JSON.stringify(query), "с лимитом", options.limit);
  }, [query, options]);
  return (
    <div>
      <p>
        Запрос: {query || "пусто"}, кликов: {clicks}
      </p>
      <button id="ask" onClick={() => setQuery("react")}>
        искать react
      </button>
      <button id="noop" onClick={() => setClicks(clicks + 1)}>
        просто клик
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Search />);
setTimeout(() => document.getElementById("noop")!.click(), 100);
setTimeout(() => document.getElementById("noop")!.click(), 200);
setTimeout(() => document.getElementById("ask")!.click(), 300);

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

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

Четыре запуска вместо двух. options в каждой отрисовке новый, и Object.is честно отвечает «не тот». С точки зрения React список не врёт — значение и правда другое, — но эффект перезапускается впустую, а стой там запрос, он уходил бы на сервер после каждого клика по чему угодно.

Лечится это на уровне списка. Перечисляйте примитивы, которые лежат внутри объекта, а сам объект собирайте внутри эффекта. Если настройки не зависят от отрисовки вовсе — выносите их за пределы компонента: переменная модуля создаётся один раз.

tsx

function Search() {
  const [query, setQuery] = React.useState("");
  const [limit, setLimit] = React.useState(10);
  const [clicks, setClicks] = React.useState(0);
  React.useEffect(() => {
    const options = { limit, lang: "ru" };
    console.log("эффект: ищем", JSON.stringify(query), "с лимитом", options.limit);
  }, [query, limit]);
  return (
    <div>
      <p>
        Запрос: {query || "пусто"}, лимит {limit}, кликов: {clicks}
      </p>
      <button id="ask" onClick={() => setQuery("react")}>
        искать react
      </button>
      <button id="more" onClick={() => setLimit(limit + 10)}>
        лимит +10
      </button>
      <button id="noop" onClick={() => setClicks(clicks + 1)}>
        просто клик
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Search />);
setTimeout(() => document.getElementById("noop")!.click(), 100);
setTimeout(() => document.getElementById("ask")!.click(), 200);
setTimeout(() => document.getElementById("noop")!.click(), 300);
setTimeout(() => document.getElementById("more")!.click(), 400);

ReactDOM.createRoot(document.getElementById("root")!).render(<Search />);
setTimeout(() => document.getElementById("noop")!.click(), 100);
setTimeout(() => document.getElementById("ask")!.click(), 200);
setTimeout(() => document.getElementById("noop")!.click(), 300);
setTimeout(() => document.getElementById("more")!.click(), 400);

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

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

Три запуска, и ни одного от «просто клика». В списке остались query и limit — примитивы, которые Object.is сравнивает по значению.

Функции, объявленные в теле компонента, устроены так же: новая на каждой отрисовке. useMemo и useCallback умеют удерживать ссылку — о них глава про скорость, — но тянуться к ним первым делом не стоит: чаще всего достаточно перечислить примитивы.

Эффект — замыкание над снимком той отрисовки, в которой создан; с пустым массивом он видит первый снимок навсегда.
Второй аргумент useEffect — не расписание, а список того, что эффект читает; React сравнивает его поэлементно через Object.is и в тело эффекта не заглядывает.
Нет массива — после каждой отрисовки; [] — один раз; [count] — после тех отрисовок, где count стал другим.
Устаревшее значение чинится двумя способами: перестать его читать (функция-обновитель) или честно перечислить и перезапускать эффект.
Компилятор проверяет форму второго аргумента, содержимое списка — линтер, правило react-hooks/exhaustive-deps; отключать его — врать React.
Объекты и функции из тела компонента новые в каждой отрисовке: перечисляйте примитивы, а объект собирайте внутри эффекта.

1/4Эффект с пустым массивом зависимостей заводит setInterval, который каждые 100 мс вызывает setCount(count + 1). Состояние было 0. Что окажется на экране через секунду?

2/4У useEffect не указан второй аргумент вообще. Когда будет выполняться такой эффект?

3/4В теле компонента написано const options = { limit: 10 }, а эффект объявлен с зависимостями [options]. Кнопка меняет состояние, которое к options не относится. Что произойдёт с эффектом после клика?

4/4Эффект читает и count, и theme, а в зависимостях указан только [count]. Кто сообщит об ошибке?

Заголовок вкладки отстаёт

Компонент выводит число сделанных задач в заголовок вкладки. После двух кликов на кнопке уже «Сделано: 2», а заголовок по-прежнему «Сделано: 0». Почините эффект. Подсказка: функция-обновитель здесь не поможет — подумайте почему.

tsx

function Board() {
  const [done, setDone] = React.useState(0);
  React.useEffect(() => {
    document.title = `Сделано: ${done}`;
  }, []);
  return (
    <button id="done" onClick={() => setDone(done + 1)}>
      Сделано: {done}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("done")!.click(), 100);
setTimeout(() => document.getElementById("done")!.click(), 200);
// сейчас печатает «Сделано: 0», а нужно «Сделано: 2»
setTimeout(() => console.log(document.title), 300);

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

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

Эффект читает done, а список зависимостей пуст — значит, он запустился один раз с нулём и больше не запускался. Перечисляем то, что читаем.

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

React.useEffect(() => {
  document.title = `Сделано: ${done}`;
}, [done]);

React.useEffect(() => {
  document.title = `Сделано: ${done}`;
}, [done]);

Обновитель не помог бы: эффект не меняет состояние, а должен увидеть его значение, чтобы записать в заголовок. Это второй случай из раздела про починку — честно перечислить и перезапускать.

Сохранение с забытым фильтром

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

tsx

function Board() {
  const [tasks, setTasks] = React.useState(0);
  const [filter, setFilter] = React.useState("все");
  React.useEffect(() => {
    console.log("сохраняем:", tasks, "задач, фильтр", filter);
  }, [tasks]);
  return (
    <div>
      <button id="add" onClick={() => setTasks(tasks + 1)}>
        добавить
      </button>
      <button id="active" onClick={() => setFilter("активные")}>
        только активные
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("add")!.click(), 100);
setTimeout(() => document.getElementById("active")!.click(), 200);
setTimeout(() => document.getElementById("add")!.click(), 300);

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

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

Вывод — три строки:

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

сохраняем: 0 задач, фильтр все
сохраняем: 1 задач, фильтр все
сохраняем: 2 задач, фильтр активные

сохраняем: 0 задач, фильтр все
сохраняем: 1 задач, фильтр все
сохраняем: 2 задач, фильтр активные

Смена фильтра ничего не сохранила: filter не в списке, а tasks не менялся. Между вторым и третьим кликом сохранённым остался бы фильтр «все» — пользователь потерял бы свой выбор. Третья строка показывает верный фильтр лишь потому, что новая отрисовка создала новый эффект со свежим снимком.

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

React.useEffect(() => {
  console.log("сохраняем:", tasks, "задач, фильтр", filter);
}, [tasks, filter]);

React.useEffect(() => {
  console.log("сохраняем:", tasks, "задач, фильтр", filter);
}, [tasks, filter]);

Теперь строк четыре, и каждое изменение доски попадает в сохранение. Линтер подчеркнул бы исходный список сразу: эффект читает filter, а в зависимостях его нет.

Лента, которая грузится на каждый лайк

Лента «загружает» страницу при изменении параметров запроса. Но загрузка печатается и после каждого лайка, который к параметрам не относится. Сделайте так, чтобы эффект срабатывал только при смене страницы, не меняя тела эффекта.

tsx

function Feed() {
  const [page, setPage] = React.useState(1);
  const [likes, setLikes] = React.useState(0);
  const params = { page, perPage: 20 };
  React.useEffect(() => {
    console.log("загружаем страницу", params.page, "по", params.perPage);
  }, [params]);
  return (
    <div>
      <p>
        Страница {page}, лайков {likes}
      </p>
      <button id="like" onClick={() => setLikes(likes + 1)}>
        лайк
      </button>
      <button id="next" onClick={() => setPage(page + 1)}>
        дальше
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Feed />);
setTimeout(() => document.getElementById("like")!.click(), 100);
setTimeout(() => document.getElementById("like")!.click(), 200);
setTimeout(() => document.getElementById("next")!.click(), 300);
// сейчас «загружаем» печатается четыре раза, а должно два

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

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

params — новый объект в каждой отрисовке, поэтому [params] перезапускает эффект после любого изменения состояния. Перечисляем примитивы, которые эффект на самом деле читает.

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

React.useEffect(() => {
  console.log("загружаем страницу", params.page, "по", params.perPage);
}, [params.page, params.perPage]);

React.useEffect(() => {
  console.log("загружаем страницу", params.page, "по", params.perPage);
}, [params.page, params.perPage]);

Линтер принимает и такую запись: он умеет следить за отдельными полями. Ещё чище — не собирать объект в теле компонента вовсе: perPage не зависит от отрисовки, его место в константе модуля, а в списке тогда остаётся один page.

Зависимости и устаревшие значения

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

Счётчик, застрявший на единицеИнтервал с пустым массивом видит первый снимок

Что на самом деле сравнивает ReactБез массива, пустой массив и [count] — три разных договора

Чинить: перестать читать или честно перечислитьФункция-обновитель против [count] с перезапуском

Что проверяет компилятор, а что — линтерФорму списка — компилятору, содержимое — линтеру

Объект в зависимостяхObject.is и новая ссылка на каждой отрисовке

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

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

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

Заголовок вкладки отстаёт

Сохранение с забытым фильтром

Лента, которая грузится на каждый лайк