Свои хуки целиком: setState, эффект и уборка

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

Та миниатюра умела ровно одно: выдать значение из ячейки по номеру вызова. Менять его приходилось руками — cells[1] = 38, — и после этого ещё звать render. Настоящий useState отдаёт вторым элементом сеттер, который делает и то и другое. Весь вопрос в том, за что этот сеттер держится.

За значение держаться бессмысленно: значение — снимок, оно устареет в тот же миг. Держаться надо за ячейку, поэтому в ячейке теперь объект, а не голое число. Прогноз перед запуском: обработчик first получен в первом рендере и нажимается дважды — что напечатает вторая строка и что третья?

ts

// ячейка теперь не просто значение: сеттеру нужно, за что держаться
type Cell = { value: unknown };

const cells: Cell[] = [];
let cursor = 0;
let component: () => void = () => {};

function useState<T>(initial: T): [T, (next: T) => void] {
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = { value: initial };
  const cell = cells[i]!;
  // сеттер замыкает саму ячейку, а не значение из неё: ячейка переживает
  // рендер, поэтому сеттер работает и после того, как рендер закончился
  const setState = (next: T): void => {
    cell.value = next;
    render(); // перерисовка — это просто повторный вызов компонента
  };
  return [cell.value as T, setState];
}

function render(): void {
  cursor = 0;
  component();
}

let click: () => void = () => {};

function Counter(): void {
  const [count, setCount] = useState(0);
  console.log("рендер: count =", count);
  click = () => setCount(count + 1); // ровно то, что вы пишете в onClick
}

component = Counter;
render();
const first = click; // обработчик ПЕРВОГО рендера — он уже висит на кнопке
first();
first(); // ?

// ячейка теперь не просто значение: сеттеру нужно, за что держаться
type Cell = { value: unknown };

const cells: Cell[] = [];
let cursor = 0;
let component: () => void = () => {};

function useState<T>(initial: T): [T, (next: T) => void] {
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = { value: initial };
  const cell = cells[i]!;
  // сеттер замыкает саму ячейку, а не значение из неё: ячейка переживает
  // рендер, поэтому сеттер работает и после того, как рендер закончился
  const setState = (next: T): void => {
    cell.value = next;
    render(); // перерисовка — это просто повторный вызов компонента
  };
  return [cell.value as T, setState];
}

function render(): void {
  cursor = 0;
  component();
}

let click: () => void = () => {};

function Counter(): void {
  const [count, setCount] = useState(0);
  console.log("рендер: count =", count);
  click = () => setCount(count + 1); // ровно то, что вы пишете в onClick
}

component = Counter;
render();
const first = click; // обработчик ПЕРВОГО рендера — он уже висит на кнопке
first();
first(); // ?

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

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

Третья строка — снова count = 1. Сеттер сработал оба раза, ячейка честно записалась, рендер честно случился, а число не выросло: count внутри замыкания first навсегда равен нулю, и оба раза в ячейку легла одна и та же единица. Это тот самый снимок, который мы уже вскрывали в «Своей очереди обновлений», — локальная переменная того вызова функции, в котором родился обработчик. Но заметьте: очереди здесь нет, наш сеттер перерисовывает сразу, а снимок никуда не делся. Его делает не пачка, а замыкание. Очередь в эту миниатюру мы сознательно не берём — во что это обойдётся, покажет последний раздел.

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

Прогноз: нажатий будет четыре — сколько строк окажется в выводе?

ts

// в ячейке теперь объект: сеттеру нужно, за что держаться,
// а эффекту (следующий раздел) — куда сложить зависимости и уборку
type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };

const cells: Cell[] = [];
let cursor = 0;
let component: () => void = () => {};
let commit: () => void = () => {}; // коммит пока пуст — наполним его эффектами

function useCell(): Cell {
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = {};
  return cells[i]!;
}

function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void] {
  const cell = useCell();
  if (!("value" in cell)) cell.value = initial;
  const setState = (next: T | ((prev: T) => T)): void => {
    // обновитель читает ячейку, а не замыкание вокруг неё
    const value = typeof next === "function" ? (next as (prev: T) => T)(cell.value as T) : next;
    if (Object.is(value, cell.value)) return; // то же сравнение делает React
    cell.value = value;
    render();
  };
  return [cell.value as T, setState];
}

function render(): void {
  cursor = 0;
  component();
  commit(); // рендер закончился — дальше идёт коммит
}

let inc: () => void = () => {};
let reset: () => void = () => {};

function Counter(): void {
  const [count, setCount] = useState(0);
  console.log("рендер: count =", count);
  inc = () => setCount((c) => c + 1);
  reset = () => setCount(0);
}

component = Counter;
render();
const first = inc; // снова обработчик первого рендера
first();
first();
reset();
reset(); // ?

// в ячейке теперь объект: сеттеру нужно, за что держаться,
// а эффекту (следующий раздел) — куда сложить зависимости и уборку
type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };

const cells: Cell[] = [];
let cursor = 0;
let component: () => void = () => {};
let commit: () => void = () => {}; // коммит пока пуст — наполним его эффектами

function useCell(): Cell {
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = {};
  return cells[i]!;
}

function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void] {
  const cell = useCell();
  if (!("value" in cell)) cell.value = initial;
  const setState = (next: T | ((prev: T) => T)): void => {
    // обновитель читает ячейку, а не замыкание вокруг неё
    const value = typeof next === "function" ? (next as (prev: T) => T)(cell.value as T) : next;
    if (Object.is(value, cell.value)) return; // то же сравнение делает React
    cell.value = value;
    render();
  };
  return [cell.value as T, setState];
}

function render(): void {
  cursor = 0;
  component();
  commit(); // рендер закончился — дальше идёт коммит
}

let inc: () => void = () => {};
let reset: () => void = () => {};

function Counter(): void {
  const [count, setCount] = useState(0);
  console.log("рендер: count =", count);
  inc = () => setCount((c) => c + 1);
  reset = () => setCount(0);
}

component = Counter;
render();
const first = inc; // снова обработчик первого рендера
first();
first();
reset();
reset(); // ?

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

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

Строк четыре: начальный рендер и три из четырёх нажатий. Обновитель вылечил застревание — c приходит из ячейки, а не из замыкания, поэтому два нажатия дают 1 и 2. А последнее нажатие не напечатало ничего: reset положил ноль поверх нуля, Object.is(0, 0) — истина, и рендера не было вовсе. Это правило вы уже видели с другой стороны: объект, изменённый на месте, экран не обновляет, потому что ссылка осталась прежней.

Настоящий React на том же сценарии напечатает пять строк, а не четыре. Сравнение у него то же самое, но сделать его заранее, прямо в сеттере, он может не всегда: сразу после изменения React сперва вызывает компонент и сравнивает уже потом — видит тот же ноль и отказывается от коммита. Тело при этом выполнилось, строка напечаталась; третий reset подряд не дал бы и её. На экран это не влияет, но число строк в консоли здесь по миниатюре не предсказать.

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

Эффект отличается от состояния тем, что во время рендера его выполнять нельзя: рендер обязан быть чистым, а эффект как раз лезет во внешний мир. Значит, хук эффекта во время рендера только подаёт заявку, а выполняется она позже — после коммита. DOM наша миниатюра не правит, поэтому весь её commit и будет разбором этих заявок.

Ячейке для этого нужны два поля, которые мы уже завели: deps — список зависимостей прошлого запуска и cleanup — функция уборки, которую тот запуск вернул. Сравнение зависимостей — поэлементный Object.is, тот же самый, что в сеттере.

Прогноз: комната меняется один раз, потом дважды приходит непрочитанное сообщение. Сколько будет строк «подключились» и сколько «отключились»?

ts

// в подложке примера — миниатюра из прошлого раздела: cells, cursor,
// useCell, useState, render и пустой пока commit
type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Job = { cell: Cell; effect: () => (() => void) | void };
declare function useCell(): Cell;
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function render(): void;
declare let component: () => void;
declare let commit: () => void;

const pending: Job[] = [];

function useEffect(effect: () => (() => void) | void, deps: unknown[]): void {
  const cell = useCell();
  const prev = cell.deps;
  // поэлементный Object.is — ровно то сравнение, которое делает React
  const same =
    prev !== undefined && prev.length === deps.length && prev.every((d, i) => Object.is(d, deps[i]));
  cell.deps = deps;
  if (same) return; // зависимости те же — эффект не трогаем вовсе
  pending.push({ cell, effect }); // работа откладывается до коммита
}

// коммит наполнился: эффекты выполняются ПОСЛЕ вызова компонента
commit = () => {
  while (pending.length > 0) {
    const job = pending.shift()!;
    job.cell.cleanup?.(); // сперва уборка за прошлым запуском
    const stop = job.effect();
    job.cell.cleanup = typeof stop === "function" ? stop : undefined;
  }
};

let go: () => void = () => {};
let bump: () => void = () => {};

function Chat(): void {
  const [room, setRoom] = useState("общий");
  const [unread, setUnread] = useState(0);
  useEffect(() => {
    console.log("подключились к", room);
    return () => console.log("отключились от", room);
  }, [room]);
  console.log("рендер:", room, "| непрочитанных:", unread);
  go = () => setRoom("новости");
  bump = () => setUnread((n) => n + 1);
}

component = Chat;
render();
go();
bump();
bump(); // ?

// в подложке примера — миниатюра из прошлого раздела: cells, cursor,
// useCell, useState, render и пустой пока commit
type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Job = { cell: Cell; effect: () => (() => void) | void };
declare function useCell(): Cell;
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function render(): void;
declare let component: () => void;
declare let commit: () => void;

const pending: Job[] = [];

function useEffect(effect: () => (() => void) | void, deps: unknown[]): void {
  const cell = useCell();
  const prev = cell.deps;
  // поэлементный Object.is — ровно то сравнение, которое делает React
  const same =
    prev !== undefined && prev.length === deps.length && prev.every((d, i) => Object.is(d, deps[i]));
  cell.deps = deps;
  if (same) return; // зависимости те же — эффект не трогаем вовсе
  pending.push({ cell, effect }); // работа откладывается до коммита
}

// коммит наполнился: эффекты выполняются ПОСЛЕ вызова компонента
commit = () => {
  while (pending.length > 0) {
    const job = pending.shift()!;
    job.cell.cleanup?.(); // сперва уборка за прошлым запуском
    const stop = job.effect();
    job.cell.cleanup = typeof stop === "function" ? stop : undefined;
  }
};

let go: () => void = () => {};
let bump: () => void = () => {};

function Chat(): void {
  const [room, setRoom] = useState("общий");
  const [unread, setUnread] = useState(0);
  useEffect(() => {
    console.log("подключились к", room);
    return () => console.log("отключились от", room);
  }, [room]);
  console.log("рендер:", room, "| непрочитанных:", unread);
  go = () => setRoom("новости");
  bump = () => setUnread((n) => n + 1);
}

component = Chat;
render();
go();
bump();
bump(); // ?

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

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

Подключений два, отключение одно, а рендеров четыре. Два последних прошли без единой строки эффекта: unread в зависимостях нет, а room не менялся — Object.is("новости", "новости") истинно, и заявка не подаётся. Обратите внимание и на порядок: «рендер» печатается раньше «подключились», потому что тело эффекта выполняется после вызова компонента, а не внутри него.

И ещё деталь, которую в настоящем React разглядеть трудно. Уборка печатает отключились от общий — старую комнату, хотя вызвана она в тот момент, когда комната уже «новости». Ничего загадочного: уборка — замыкание того рендера, в котором эффект запускался, и room в нём тот, прежний. В миниатюре это просто видно: cell.cleanup хранит функцию, созданную в прошлом коммите.

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

Соблазн понятный: сравнивать не зависимости, а саму функцию эффекта — она ведь новая тогда, когда что-то изменилось. Не выйдет. Стрелка в теле компонента создаётся заново в каждом рендере, Object.is на двух таких функциях всегда ложь, и эффект перезапускался бы после каждой отрисовки. Поэтому сравниваются не строки кода, а данные, и список этих данных пишется руками — со всеми последствиями из статьи «Зависимости и устаревшие значения».

У уборки два повода сработать: перед новым запуском того же эффекта и при уходе компонента. Первый мы видели. Но стоит эффектам стать двумя, как возникает вопрос, которого на одном не бывает: в каком порядке?

Наш коммит разбирает заявки по очереди — уборка, тело, уборка, тело. Прогноз: что напечатает смена комнаты?

ts

// миниатюра из прошлого раздела целиком лежит в подложке — здесь только
// компонент, и у него теперь ДВА эффекта на одной и той же комнате
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function useEffect(effect: () => (() => void) | void, deps: unknown[]): void;
declare function render(): void;
declare let component: () => void;

let go: () => void = () => {};

function Chat(): void {
  const [room, setRoom] = useState("общий");
  useEffect(() => {
    console.log("A: подключились к", room);
    return () => console.log("A: отключились от", room);
  }, [room]);
  useEffect(() => {
    console.log("B: открыли журнал", room);
    return () => console.log("B: закрыли журнал", room);
  }, [room]);
  console.log("рендер:", room);
  go = () => setRoom("новости");
}

component = Chat;
render();
go(); // ?

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

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

Вышло «A отключились, A подключились, B закрыли, B открыли». Теперь тот же компонент на настоящих хуках — сверьте порядок сами.

tsx

// тот же компонент, но хуки настоящие: сверим порядок строк
function Chat() {
  const [room, setRoom] = React.useState("общий");
  React.useEffect(() => {
    console.log("A: подключились к", room);
    return () => console.log("A: отключились от", room);
  }, [room]);
  React.useEffect(() => {
    console.log("B: открыли журнал", room);
    return () => console.log("B: закрыли журнал", room);
  }, [room]);
  console.log("рендер:", room);
  return (
    <button id="go" onClick={() => setRoom("новости")}>
      в «новости»
    </button>
  );
}

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

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

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

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

Правится это в одном месте — в коммите. Сам useEffect не меняется: он и так кладёт в очередь не готовую работу, а пару «ячейка плюс эффект», и разделить её на два прохода можно позже. Заодно добавим уборку при уходе: unmount проходит по ячейкам, зовёт всё, что в них осталось, и очищает список.

ts

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Job = { cell: Cell; effect: () => (() => void) | void };
declare const cells: Cell[];
declare const pending: Job[];
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function useEffect(effect: () => (() => void) | void, deps: unknown[]): void;
declare function render(): void;
declare let component: () => void;
declare let commit: () => void;

commit = () => {
  const batch = pending.splice(0);
  // сперва ВСЕ уборки, и только потом ВСЕ тела: иначе первый эффект
  // начинает работу, пока второй ещё не прибрал за прошлым рендером
  for (const job of batch) job.cell.cleanup?.();
  for (const job of batch) {
    const stop = job.effect();
    job.cell.cleanup = typeof stop === "function" ? stop : undefined;
  }
};

function unmount(): void {
  // компонент уходит: прекращаем всё, что начали его эффекты, и забываем
  // ячейки
  for (const cell of cells) cell.cleanup?.();
  cells.length = 0;
}

let go: () => void = () => {};

function Chat(): void {
  const [room, setRoom] = useState("общий");
  useEffect(() => {
    console.log("A: подключились к", room);
    return () => console.log("A: отключились от", room);
  }, [room]);
  useEffect(() => {
    console.log("B: открыли журнал", room);
    return () => console.log("B: закрыли журнал", room);
  }, [room]);
  console.log("рендер:", room);
  go = () => setRoom("новости");
}

component = Chat;
render();
go();
unmount();
render(); // ?

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Job = { cell: Cell; effect: () => (() => void) | void };
declare const cells: Cell[];
declare const pending: Job[];
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function useEffect(effect: () => (() => void) | void, deps: unknown[]): void;
declare function render(): void;
declare let component: () => void;
declare let commit: () => void;

commit = () => {
  const batch = pending.splice(0);
  // сперва ВСЕ уборки, и только потом ВСЕ тела: иначе первый эффект
  // начинает работу, пока второй ещё не прибрал за прошлым рендером
  for (const job of batch) job.cell.cleanup?.();
  for (const job of batch) {
    const stop = job.effect();
    job.cell.cleanup = typeof stop === "function" ? stop : undefined;
  }
};

function unmount(): void {
  // компонент уходит: прекращаем всё, что начали его эффекты, и забываем
  // ячейки
  for (const cell of cells) cell.cleanup?.();
  cells.length = 0;
}

let go: () => void = () => {};

component = Chat;
render();
go();
unmount();
render(); // ?

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

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

Порядок совпал с настоящим. А в конце видно второе применение уборки: unmount отключил обе подписки, и следующий рендер начал с пустого списка — useState("общий") снова прочитал начальное значение. Ровно это происходит, когда компонент уходит с экрана: его состояние не «сохраняется где-то», его больше нет.

Проверка двойным запуском в разработке похожа на наш unmount, но мягче: React зовёт уборку и тело ещё раз, а ячейки не трогает — состояние проверку переживает.

Одно место осталось откровенно ненастоящим: cells — один массив на всё. Прошлая статья утверждала, что у каждого вызова хука состояние своё; это половина правды. Вторая половина — свой список ячеек у каждого экземпляра компонента, и вот её-то мы и не собрали.

Пока компонент один, это незаметно. Стоит появиться второму — и всплывает случай, который правило хуков не запрещает и запретить не может. Компонент в условии — законная разметка: {withHint && <Hint />} пишут каждый день, и хуки внутри Hint при этом вызываются на верхнем уровне Hint. Прогноз: что напечатает второй рендер?

ts

// подложка — миниатюра из прошлого раздела; здесь только компоненты
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function render(): void;
declare let component: () => void;

let withHint = true;

function Hint(): void {
  const [text] = useState("подсказка");
  console.log("Hint:", text);
}

function Counter(): void {
  const [count] = useState(0);
  console.log("Counter:", count);
}

function Panel(): void {
  // компонент в условии — это законная разметка: {withHint && <Hint />}.
  // Правило хуков её не запрещает: хуки внутри Hint вызываются на верхнем
  // уровне Hint, а не в условии
  if (withHint) Hint();
  Counter();
}

component = Panel;
render();
withHint = false;
render(); // ?

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

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

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

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

ts

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Instance = { cells: Cell[]; component: () => void };

// «текущий экземпляр»: такая переменная есть и у React — он выставляет её
// перед вызовом компонента, и по ней хук находит нужный список ячеек
let current: Instance = { cells: [], component: () => {} };
let cursor = 0;

function useCell(): Cell {
  const cells = current.cells; // список ячеек берётся у текущего экземпляра
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = {};
  return cells[i]!;
}

function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void] {
  const cell = useCell();
  const owner = current; // сеттер запоминает, чей он
  if (!("value" in cell)) cell.value = initial;
  const setState = (next: T | ((prev: T) => T)): void => {
    const value = typeof next === "function" ? (next as (prev: T) => T)(cell.value as T) : next;
    if (Object.is(value, cell.value)) return;
    cell.value = value;
    render(owner); // перерисовывается только владелец, а не всё подряд
  };
  return [cell.value as T, setState];
}

function render(inst: Instance): void {
  current = inst;
  cursor = 0;
  inst.component();
}

let bump: () => void = () => {};

function Hint(): void {
  const [text] = useState("подсказка");
  console.log("Hint:", text);
}

function Counter(): void {
  const [count, setCount] = useState(0);
  console.log("Counter:", count);
  bump = () => setCount((c) => c + 1);
}

const hint: Instance = { cells: [], component: Hint };
const counter: Instance = { cells: [], component: Counter };
render(hint);
render(counter);
bump();
bump(); // ?

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Instance = { cells: Cell[]; component: () => void };

// «текущий экземпляр»: такая переменная есть и у React — он выставляет её
// перед вызовом компонента, и по ней хук находит нужный список ячеек
let current: Instance = { cells: [], component: () => {} };
let cursor = 0;

function useCell(): Cell {
  const cells = current.cells; // список ячеек берётся у текущего экземпляра
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = {};
  return cells[i]!;
}

function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void] {
  const cell = useCell();
  const owner = current; // сеттер запоминает, чей он
  if (!("value" in cell)) cell.value = initial;
  const setState = (next: T | ((prev: T) => T)): void => {
    const value = typeof next === "function" ? (next as (prev: T) => T)(cell.value as T) : next;
    if (Object.is(value, cell.value)) return;
    cell.value = value;
    render(owner); // перерисовывается только владелец, а не всё подряд
  };
  return [cell.value as T, setState];
}

function render(inst: Instance): void {
  current = inst;
  cursor = 0;
  inst.component();
}

let bump: () => void = () => {};

function Hint(): void {
  const [text] = useState("подсказка");
  console.log("Hint:", text);
}

function Counter(): void {
  const [count, setCount] = useState(0);
  console.log("Counter:", count);
  bump = () => setCount((c) => c + 1);
}

const hint: Instance = { cells: [], component: Hint };
const counter: Instance = { cells: [], component: Counter };
render(hint);
render(counter);
bump();
bump(); // ?

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

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

Столкновение исчезло, и появилось кое-что ещё: bump перерисовал только Counter — строки Hint в выводе после первой нет. Так и должно быть. Сеттер запомнил в owner своего владельца, а не «весь экран»: рендер начинается с того компонента, чьё состояние изменилось. В настоящем React он идёт дальше вниз по дереву, к детям, но вверх и вбок — не идёт.

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

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

ts

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Job = { cell: Cell; effect: () => (() => void) | void };
type Instance = { cells: Cell[]; component: () => void };

let current: Instance = { cells: [], component: () => {} };
let cursor = 0;
const pending: Job[] = [];

function useCell(): Cell {
  const cells = current.cells;
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = {};
  return cells[i]!;
}

function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void] {
  const cell = useCell();
  const owner = current;
  if (!("value" in cell)) cell.value = initial;
  const setState = (next: T | ((prev: T) => T)): void => {
    const value = typeof next === "function" ? (next as (prev: T) => T)(cell.value as T) : next;
    if (Object.is(value, cell.value)) return;
    cell.value = value;
    render(owner);
  };
  return [cell.value as T, setState];
}

function useEffect(effect: () => (() => void) | void, deps: unknown[]): void {
  const cell = useCell();
  const prev = cell.deps;
  const same =
    prev !== undefined && prev.length === deps.length && prev.every((d, i) => Object.is(d, deps[i]));
  cell.deps = deps;
  if (same) return;
  pending.push({ cell, effect });
}

function commit(): void {
  const batch = pending.splice(0);
  for (const job of batch) job.cell.cleanup?.();
  for (const job of batch) {
    const stop = job.effect();
    job.cell.cleanup = typeof stop === "function" ? stop : undefined;
  }
}

function render(inst: Instance): void {
  current = inst;
  cursor = 0;
  inst.component();
  commit();
}

function unmount(inst: Instance): void {
  for (const cell of inst.cells) cell.cleanup?.();
  inst.cells.length = 0;
}

let bump: () => void = () => {};

function Hint(): void {
  const [text] = useState("подсказка");
  console.log("Hint:", text);
}

function Counter(): void {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("  эффект Counter:", count);
    return () => console.log("  уборка Counter:", count);
  }, [count]);
  console.log("Counter:", count);
  bump = () => setCount((c) => c + 1);
}

const hint: Instance = { cells: [], component: Hint };
const counter: Instance = { cells: [], component: Counter };
render(hint);
render(counter);
bump();
unmount(counter);

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Job = { cell: Cell; effect: () => (() => void) | void };
type Instance = { cells: Cell[]; component: () => void };

let current: Instance = { cells: [], component: () => {} };
let cursor = 0;
const pending: Job[] = [];

function useCell(): Cell {
  const cells = current.cells;
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = {};
  return cells[i]!;
}

function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void] {
  const cell = useCell();
  const owner = current;
  if (!("value" in cell)) cell.value = initial;
  const setState = (next: T | ((prev: T) => T)): void => {
    const value = typeof next === "function" ? (next as (prev: T) => T)(cell.value as T) : next;
    if (Object.is(value, cell.value)) return;
    cell.value = value;
    render(owner);
  };
  return [cell.value as T, setState];
}

function useEffect(effect: () => (() => void) | void, deps: unknown[]): void {
  const cell = useCell();
  const prev = cell.deps;
  const same =
    prev !== undefined && prev.length === deps.length && prev.every((d, i) => Object.is(d, deps[i]));
  cell.deps = deps;
  if (same) return;
  pending.push({ cell, effect });
}

function commit(): void {
  const batch = pending.splice(0);
  for (const job of batch) job.cell.cleanup?.();
  for (const job of batch) {
    const stop = job.effect();
    job.cell.cleanup = typeof stop === "function" ? stop : undefined;
  }
}

function render(inst: Instance): void {
  current = inst;
  cursor = 0;
  inst.component();
  commit();
}

function unmount(inst: Instance): void {
  for (const cell of inst.cells) cell.cleanup?.();
  inst.cells.length = 0;
}

let bump: () => void = () => {};

function Hint(): void {
  const [text] = useState("подсказка");
  console.log("Hint:", text);
}

function Counter(): void {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("  эффект Counter:", count);
    return () => console.log("  уборка Counter:", count);
  }, [count]);
  console.log("Counter:", count);
  bump = () => setCount((c) => c + 1);
}

const hint: Instance = { cells: [], component: Hint };
const counter: Instance = { cells: [], component: Counter };
render(hint);
render(counter);
bump();
unmount(counter);

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

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

Теперь проверка, ради которой всё затевалось. Компонент ниже не вызывает useState по имени — он берёт хуки из набора H. Подменив набор, один и тот же компонент можно выполнить сперва нашей миниатюрой, потом настоящим React. Это не трюк ради статьи: внутри React устроен так же — useState из пакета react лишь достаёт текущий набор и зовёт одноимённый метод у него.

Прогноз: совпадёт вывод или разойдётся — и если разойдётся, то на какой строке?

tsx

// в подложке лежит наша миниатюра целиком. Хуки компонент берёт не по имени,
// а из набора H — подменив набор, один и тот же компонент выполняется
// то нашей миниатюрой, то настоящим React.
type Hooks = {
  useState: <T>(initial: T) => [T, (next: T | ((prev: T) => T)) => void];
  useEffect: (effect: () => (() => void) | void, deps: unknown[]) => void;
};
type Instance = { cells: unknown[]; component: () => void };
declare let H: Hooks;
declare const mini: Hooks;
declare function render(inst: Instance): void;

let press: () => void = () => {};

function Trip() {
  const [city, setCity] = H.useState("Москва");
  H.useEffect(() => {
    console.log("  подписались на", city);
    return () => console.log("  отписались от", city);
  }, [city]);
  H.useEffect(() => {
    console.log("  экран открыт");
  }, []);
  console.log("рендер:", city);
  // присваивание во время рендера — нечистый рендер, так писать нельзя;
  // здесь это единственный способ нажать одну «кнопку» в обеих реализациях
  press = () => setCity(city === "Москва" ? "Казань" : "Москва");
  return <p>{city}</p>;
}

console.log("=== наша миниатюра ===");
H = mini;
render({ cells: [], component: Trip });
press();
press();

setTimeout(() => {
  console.log("=== настоящий React ===");
  H = React;
  ReactDOM.createRoot(document.getElementById("root")!).render(<Trip />);
  // нажатия отсчитываются от монтирования: пока React не отрисовал Trip,
  // в press лежит обработчик миниатюры
  setTimeout(() => press(), 60);
  setTimeout(() => press(), 120);
}, 0);

// в подложке лежит наша миниатюра целиком. Хуки компонент берёт не по имени,
// а из набора H — подменив набор, один и тот же компонент выполняется
// то нашей миниатюрой, то настоящим React.
type Hooks = {
  useState: <T>(initial: T) => [T, (next: T | ((prev: T) => T)) => void];
  useEffect: (effect: () => (() => void) | void, deps: unknown[]) => void;
};
type Instance = { cells: unknown[]; component: () => void };
declare let H: Hooks;
declare const mini: Hooks;
declare function render(inst: Instance): void;

let press: () => void = () => {};

console.log("=== наша миниатюра ===");
H = mini;
render({ cells: [], component: Trip });
press();
press();

setTimeout(() => {
  console.log("=== настоящий React ===");
  H = React;
  ReactDOM.createRoot(document.getElementById("root")!).render(<Trip />);
  // нажатия отсчитываются от монтирования: пока React не отрисовал Trip,
  // в press лежит обработчик миниатюры
  setTimeout(() => press(), 60);
  setTimeout(() => press(), 120);
}, 0);

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

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

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

Заодно понятно, откуда берётся «Invalid hook call» из «Правил хуков». React выставляет набор хуков перед вызовом компонента и убирает сразу после; в обработчике, который сработает через секунду, набора уже нет — звать оттуда просто некого. У нашей миниатюры этой проверки нет, и она бы молча отдала ячейку последнего отрисованного компонента: React в этом месте строже нас.

А теперь туда, где миниатюра расходится с оригиналом. Нажатие меняет два состояния сразу — прогноз: сколько рендеров будет там и сколько здесь?

tsx

type Hooks = {
  useState: <T>(initial: T) => [T, (next: T | ((prev: T) => T)) => void];
  useEffect: (effect: () => (() => void) | void, deps: unknown[]) => void;
};
type Instance = { cells: unknown[]; component: () => void };
declare let H: Hooks;
declare const mini: Hooks;
declare function render(inst: Instance): void;

let press: () => void = () => {};

function Panel() {
  const [likes, setLikes] = H.useState(0);
  const [views, setViews] = H.useState(0);
  console.log("рендер: лайков", likes, "| просмотров", views);
  press = () => {
    setLikes(likes + 1);
    setViews(views + 1);
  };
  return <p>{likes} / {views}</p>;
}

console.log("=== наша миниатюра ===");
H = mini;
render({ cells: [], component: Panel });
press();

setTimeout(() => {
  console.log("=== настоящий React ===");
  H = React;
  ReactDOM.createRoot(document.getElementById("root")!).render(<Panel />);
  setTimeout(() => press(), 80); // от монтирования, как и в прошлом примере
}, 0);

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

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

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

Механизм	В нашей миниатюре	В настоящем React
Выбор ячейки	номер вызова, курсор с нуля на каждый рендер	то же, только список односвязный
Сеттер и Object.is	прежнее значение — рендера нет	то же сравнение, но сразу после изменения компонент может быть вызван ещё раз впустую
Зависимости эффекта	поэлементный `Object.is`	то же
Момент эффекта	сразу после вызова компонента	после коммита — обычно уже после нового кадра
Перерисовка	сразу и синхронно, по одной на сеттер	очередь, пачка, приоритеты
Дерево	экземпляры лежат рядом, детей нет	узлы дерева, рендер идёт вниз
Разметка	не рисуется вовсе	сверка описаний и правка DOM

Последние три строки таблицы — не мелочи, а отдельные машины, и две из них вы уже собирали по отдельности: очередь с пачкой — в главе про состояние, сверку описаний с правкой DOM — в первой главе. Сегодняшняя миниатюра — то, что связывает их с вашей функцией: ячейки, которые переживают её вызов. А следующая пара статей, про use() и Suspense, стоит на другом материале: use() ячеек в этом списке не занимает, и ожидание держится не на них, а на брошенном промисе.

Сеттер держится не за значение, а за ячейку: ячейка переживает рендер, поэтому обработчик работает и после его конца. Значение внутри обработчика остаётся снимком — отсюда счётчик, застрявший на единице.
Функция-обновитель читает ячейку, а не замыкание. Сеттер с прежним значением (Object.is) рендера не запускает вовсе.
Хук эффекта во время рендера только подаёт заявку: сравнивает зависимости поэлементным Object.is и, если они разошлись, кладёт в очередь пару «ячейка плюс эффект».
Коммит делает два прохода: сперва все уборки, потом все тела. Уборка — замыкание того рендера, в котором эффект запускался, поэтому она видит старые значения.
Список ячеек не один на всех: он свой у каждого экземпляра компонента, а сеттер запоминает владельца и перерисовывает только его ветку.
Хуки берутся из «текущего набора», который React выставляет на время рендера и убирает после. Тот же компонент на нашем наборе и на настоящем печатает одно и то же — пока дело не доходит до очереди обновлений.

1/4Обработчик, полученный в первом рендере, вызывает setCount(count + 1). Его нажали дважды подряд, и счётчик остановился на единице. Почему?

2/4Где React вызывает Object.is?

3/4В миниатюре с одним общим списком ячеек разметка {withHint && <Hint />} ломает соседний Counter. Почему настоящий React так не ломается?

4/4У компонента два эффекта, и в одном коммите перезапускаются оба. В каком порядке пойдут уборки и тела?

Свой useRef

В подложке примера лежит миниатюра из статьи. Допишите useRef: он должен возвращать одну и ту же коробку во всех рендерах и не вызывать перерисовку. Сейчас счётчик вызовов компонента застревает на единице, а должен дойти до тройки.

ts

// в подложке — миниатюра из статьи: useCell, useState, render
type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Instance = { cells: Cell[]; component: () => void };
declare function useCell(): Cell;
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function render(inst: Instance): void;

function useRef<T>(initial: T): { current: T } {
  // ваш код: коробка должна быть одна и та же во всех рендерах
  return { current: initial };
}

let next: () => void = () => {};

function Timer(): void {
  const [tick, setTick] = useState(0);
  const renders = useRef(0);
  renders.current += 1;
  console.log("тик:", tick, "| вызовов компонента:", renders.current);
  next = () => setTick((t) => t + 1);
}

render({ cells: [], component: Timer });
next();
next(); // сейчас счётчик застревает на единице, а должен дойти до тройки

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

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

Коробка — обычное значение, и хранить её надо там же, где хранится состояние: в ячейке. Разница с useState только в том, что менять её никто не просит, поэтому и сеттера нет, и рендера нет — отсюда и «ref не вызывает перерисовку».

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

function useRef<T>(initial: T): { current: T } {
  const cell = useCell();
  // коробка кладётся в ячейку один раз и дальше только достаётся
  if (!("value" in cell)) cell.value = { current: initial };
  return cell.value as { current: T };
}

function useRef<T>(initial: T): { current: T } {
  const cell = useCell();
  // коробка кладётся в ячейку один раз и дальше только достаётся
  if (!("value" in cell)) cell.value = { current: initial };
  return cell.value as { current: T };
}

Вывод становится 1, 2, 3. Заодно видно, почему запись в ref.current не обновляет экран: сеттера нет, рендера никто не просит — коробка меняется молча. И почему usePrevious из прошлой статьи работает: ячейка переживает рендер, а запись в неё делается уже в эффекте, после него.

useReducer в две строки

В статье «useReducer и размеченные объединения» этот хук выглядел как отдельный механизм. Соберите его на нашей миниатюре — новых ячеек заводить не нужно, всё необходимое уже есть. Сейчас пример печатает одну строку, а должен четыре: 0, 1, 2, 0.

ts

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Instance = { cells: Cell[]; component: () => void };
declare function useCell(): Cell;
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function render(inst: Instance): void;

type Action = { type: "inc" } | { type: "reset" };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "inc":
      return state + 1;
    case "reset":
      return 0;
  }
}

function useReducer<S, A>(reduce: (state: S, action: A) => S, initial: S): [S, (action: A) => void] {
  // ваш код: новых ячеек заводить не нужно
  return [initial, () => {}];
}

let send: (action: Action) => void = () => {};

function Counter(): void {
  const [count, dispatch] = useReducer(reducer, 0);
  console.log("рендер:", count);
  send = dispatch;
}

render({ cells: [], component: Counter });
send({ type: "inc" });
send({ type: "inc" });
send({ type: "reset" }); // сейчас в выводе одна строка, а должно быть четыре

type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Instance = { cells: Cell[]; component: () => void };
declare function useCell(): Cell;
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function render(inst: Instance): void;

type Action = { type: "inc" } | { type: "reset" };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "inc":
      return state + 1;
    case "reset":
      return 0;
  }
}

function useReducer<S, A>(reduce: (state: S, action: A) => S, initial: S): [S, (action: A) => void] {
  // ваш код: новых ячеек заводить не нужно
  return [initial, () => {}];
}

let send: (action: Action) => void = () => {};

function Counter(): void {
  const [count, dispatch] = useReducer(reducer, 0);
  console.log("рендер:", count);
  send = dispatch;
}

render({ cells: [], component: Counter });
send({ type: "inc" });
send({ type: "inc" });
send({ type: "reset" }); // сейчас в выводе одна строка, а должно быть четыре

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

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

Отдельного механизма и нет: useReducer — это useState, у которого обновитель собран из редьюсера и действия.

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

function useReducer<S, A>(reduce: (state: S, action: A) => S, initial: S): [S, (action: A) => void] {
  const [state, setState] = useState(initial);
  // dispatch — это setState с обновителем, а редьюсер и есть обновитель
  return [state, (action: A) => setState((prev) => reduce(prev, action))];
}

function useReducer<S, A>(reduce: (state: S, action: A) => S, initial: S): [S, (action: A) => void] {
  const [state, setState] = useState(initial);
  // dispatch — это setState с обновителем, а редьюсер и есть обновитель
  return [state, (action: A) => setState((prev) => reduce(prev, action))];
}

Отсюда следуют и знакомые правила. Редьюсер обязан быть чистой функцией — потому что он выполняется там же, где обновитель, и React вправе вызвать его лишний раз. Действие с тем же результатом не перерисует экран — сработает Object.is в сеттере. А вот стабильности dispatch у нас нет: наш сеттер — новая стрелка в каждом рендере, тогда как React от рендера к рендеру возвращает одну и ту же функцию. Проверить это можно одной строкой — сравнить сеттер с сеттером прошлого рендера.

Предсказать число запусков

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

ts

// подложка — миниатюра из статьи целиком
type Cell = { value?: unknown; deps?: unknown[]; cleanup?: () => void };
type Instance = { cells: Cell[]; component: () => void };
declare function useState<T>(initial: T): [T, (next: T | ((prev: T) => T)) => void];
declare function useEffect(effect: () => (() => void) | void, deps: unknown[]): void;
declare function render(inst: Instance): void;

let go: () => void = () => {};

function Card(): void {
  const [count, setCount] = useState(0);
  const user = { name: "Рико" };
  useEffect(() => {
    console.log("  эффект: пользователь", user.name, "| счёт", count);
  }, [user]);
  console.log("рендер:", count);
  go = () => setCount((c) => c + 1);
}

render({ cells: [], component: Card });
go();
go(); // сколько раз запустится эффект?

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

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

Три раза — после каждого рендера. Строка, которая за это отвечает, одна:

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

prev.every((d, i) => Object.is(d, deps[i]))

prev.every((d, i) => Object.is(d, deps[i]))

user собирается заново в каждом вызове компонента, значит в deps каждый раз лежит новая ссылка. Object.is сравнивает ссылки, а не содержимое: два объекта { name: "Рико" } для него разные, сколько бы одинаковых полей в них ни было. Сравнение вглубь React не делает намеренно — оно стоило бы дороже самого эффекта, а на функциях и вовсе невозможно.

Лечится это тем же, чем и в статье про зависимости: в списке перечисляют примитивы ([user.name]), а объект собирают внутри эффекта. Или запоминают сам объект: useMemo из следующей главы держит в ячейке пару «значение плюс зависимости» и сравнивает их тем же самым Object.is.

Свои хуки целиком: setState, эффект и уборка

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

Сеттер: ячейка плюс перерисовкаЗа что держится функция, которую вы зовёте из onClick

Эффект: заявка, которую разбирают после рендераПоэлементный Object.is и очередь коммита

Уборка: сперва все, потом всеПорядок, который виден только на двух эффектах

Свой список у каждого экземпляраКомпонент в условии — законная разметка

Один компонент, два ReactПодмена набора хуков — и сверка вывода

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

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

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

Свой useRef

useReducer в две строки

Предсказать число запусков