useState: память компонента

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

В проекте части II доска задач жила в обычном массиве, а страницу приводила в порядок функция render() — и звать её приходилось руками после каждого изменения. Забыли позвать — на экране осталось старое. React убирает ровно этот ручной вызов, но взамен требует, чтобы данные лежали в известном ему месте.

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

tsx

function Mixed() {
  let clicks = 0; // обычная переменная внутри функции-компонента
  const [redraws, setRedraws] = React.useState(0);
  console.log("рисую: redraws =", redraws, "clicks =", clicks);

  return (
    <div>
      <button id="click" onClick={() => { clicks += 1; console.log("clicks стало", clicks); }}>
        клик
      </button>
      <button id="redraw" onClick={() => setRedraws(redraws + 1)}>перерисовать</button>
    </div>
  );
}

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

// пример нажимает кнопки за вас; пауза нужна, потому что React отрисовывает
// компонент не сразу, а отдельной задачей после текущего кода
setTimeout(() => document.getElementById("click")!.click(), 50);
setTimeout(() => document.getElementById("click")!.click(), 100);
setTimeout(() => document.getElementById("redraw")!.click(), 150);
setTimeout(() => document.getElementById("click")!.click(), 200);

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

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

Переменная честно менялась: 1, 2. На экране это не отразилось ни разу — React не следит за локальными переменными и не догадывается, что пора перерисовывать. А когда перерисовка всё-таки случилась по другой причине, функция Mixed была вызвана заново, строка let clicks = 0 выполнилась снова — и счёт пошёл с нуля.

Две беды сразу: значение не переживает перерисовку и не вызывает её. От состояния нужно и то и другое.

Вынести переменную наружу компонента — не выход: она переживёт перерисовку, но по-прежнему никого не разбудит. Это и есть ручной render() из части II, только без вызова.

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

tsx

function Counter() {
  const [count, setCount] = React.useState(0);
  console.log("рисую: count =", count); // печатается на каждом вызове компонента

  return <button id="inc" onClick={() => setCount(count + 1)}>Нажато: {count}</button>;
}

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

setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 100);
setTimeout(() => console.log("на кнопке:", document.getElementById("inc")!.textContent), 150);

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

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

Три строки «рисую» — это три вызова функции Counter: один при первой отрисовке и по одному на каждый клик. Главное в выводе — второй и третий: React.useState(0) отдаёт ноль только в первый раз, дальше он возвращает то, что лежит в памяти React.

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

Хук возвращает массив, а не объект вида { value, setValue }, ради свободы имён: деструктуризация массива берёт значения по местам, поэтому в одном компоненте уживаются сколько угодно состояний. Имена принято строить парой x и setX — это не требование React, а всеобщий уговор.

tsx

function Form() {
  // пять состояний в одном компоненте — обычное дело, и все с разными именами
  const [name, setName] = React.useState("Рико");
  const [age, setAge] = React.useState(34);
  console.log(typeof name, typeof age, typeof setName);

  return <span onClick={() => { setName("Гость"); setAge(0); }}>{name}, {age}</span>;
}

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

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

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

Раз count — переменная, почему бы просто не присвоить ей новое значение? Компилятор отвечает на это раньше, чем браузер.

tsx

function Counter() {
  const [count, setCount] = React.useState(0);

  // присвоение переменной вместо вызова сеттера
  return <button onClick={() => { count = count + 1; }}>{count}</button>;
}

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

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

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

Пара приходит через const, и диагностика на строке 5 говорит именно об этом. Но даже let не спас бы: присвоение поменяло бы локальную переменную, которая живёт до конца вызова функции, а память лежит у React, и о вашем присвоении он не узнает. Единственная дверь внутрь — сеттер.

Где именно эта память? Не в имени переменной и не в имени функции: React хранит её для конкретного места компонента в дереве. Два одинаковых счётчика рядом ничего друг о друге не знают.

tsx

function Counter({ label }: { label: string }) {
  const [count, setCount] = React.useState(0);
  return <button id={label} onClick={() => setCount(count + 1)}>{label}: {count}</button>;
}

function App() {
  return <div><Counter label="a" /> <Counter label="b" /></div>;
}

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

setTimeout(() => document.getElementById("a")!.click(), 50);
setTimeout(() => document.getElementById("a")!.click(), 100);
setTimeout(() => document.getElementById("b")!.click(), 150);
setTimeout(() => {
  console.log(document.getElementById("a")!.textContent);
  console.log(document.getElementById("b")!.textContent);
}, 200);

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

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

Два клика по первому, один по второму — и каждый считает своё. Тот же компонент, тот же useState(0), две независимые ячейки. Поэтому компонент со состоянием можно ставить на страницу сколько угодно раз, не боясь, что копии передерутся за общую переменную.

Тип состояния компилятор выводит из начального значения — механика та же, что в части III. Из 0 получается number, и сеттер сразу начинает требовать число.

tsx

function Counter() {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount("много")}>{count}</button>;
}

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

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

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

Заодно видно, как называется тип аргумента сеттера: SetStateAction<number> — это «либо новое значение, либо функция, которая его посчитает». О второй половине речь пойдёт в статье про функцию-обновитель.

Вывод типов подводит там, где начальное значение беднее будущего. Пустой массив ничего не знает о своих элементах, null — о том, что когда-нибудь станет объектом, а строка расширяется до string, теряя набор допустимых значений.

Начальное значение	Что выведет компилятор	Что писать
`0`, `false`, `"Рико"`	`number`, `boolean`, `string`	ничего, вывода достаточно
`[]`	`never[]` — массив, куда нельзя ничего положить	`useState<Item[]>([])`
`null`	`null` — и других значений не примет	`useState<User \| null>(null)`
`"idle"` при трёх допустимых	`string` — опечатка пройдёт молча	`useState<Status>("idle")`

Первые два случая компилятор ловит сам, третий — самый коварный: ошибки нет, а состояние принимает любую строку. Запустите и сравните диагностики двух примеров: код в них отличается только типами.

tsx

function Form() {
  const [items, setItems] = React.useState([]);
  const [status, setStatus] = React.useState("idle");

  return (
    <button onClick={() => { setItems(["чай"]); setStatus("loadnig"); }}>
      {status}: {items.length}
    </button>
  );
}

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

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

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

tsx

type Status = "idle" | "loading" | "done";

function Form() {
  const [items, setItems] = React.useState<string[]>([]);
  const [status, setStatus] = React.useState<Status>("idle");

  return (
    <button onClick={() => { setItems(["чай"]); setStatus("loadnig"); }}>
      {status}: {items.length}
    </button>
  );
}

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

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

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

В первом примере одна диагностика — про never, а опечатка "loadnig" прошла незамеченной. Во втором её ловит компилятор, и это ровно та причина, по которой юнион-состояния типизируют явно, даже когда лень.

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

tsx

type User = { name: string };

function Profile() {
  const [user, setUser] = React.useState(null);

  return <button onClick={() => setUser("Рико")}>{user ?? "гость"}</button>;
}

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

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

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

Явный юнион чинит и типы, и чтение: user приходится сузить проверкой, прежде чем брать name, — сужение из части III работает здесь без единой поправки.

tsx

type User = { name: string };

function Profile() {
  const [user, setUser] = React.useState<User | null>(null);
  console.log(user === null ? "гость" : user.name);

  return (
    <button id="login" onClick={() => setUser({ name: "Рико" })}>
      {user === null ? "войти" : user.name}
    </button>
  );
}

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

setTimeout(() => document.getElementById("login")!.click(), 50);

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

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

Начальное значение нужно React ровно однажды — при первой отрисовке. Но useState(readSaved()) — это вызов, и он случается при каждом вызове компонента, сколько бы раз тот ни перерисовался.

tsx

function readSaved() {
  console.log("читаю сохранённое значение");
  return 0;
}

function Counter() {
  const [count, setCount] = React.useState(readSaved());
  return <button id="inc" onClick={() => setCount(count + 1)}>{count}</button>;
}

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

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

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

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

Три строки в выводе на три отрисовки. Значение при этом использовалось только первое: остальные два раза функция посчитала его зря. С разбором сохранённого черновика или чтением из localStorage такая работа на каждый клик уже заметна.

Лекарство — отдать useState саму функцию вместо результата. React зовёт её только при первой отрисовке; это называется ленивой инициализацией.

tsx

function readSaved() {
  console.log("читаю сохранённое значение");
  return 0;
}

function Counter() {
  const [count, setCount] = React.useState(readSaved);
  return <button id="inc" onClick={() => setCount(count + 1)}>{count}</button>;
}

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

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

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

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

Разница ровно в двух символах: readSaved() — вызвать и отдать результат, readSaved — отдать функцию.

Обратная сторона: если само состояние должно быть функцией, useState(fn) её выполнит, а не сохранит. Пишите useState(() => fn) — React позовёт внешнюю стрелку и сохранит то, что она вернула.

Компонент — функция, и перерисовка вызывает её заново: локальная переменная не переживает вызов и не запускает перерисовку.
useState(начальное) возвращает пару: текущее значение и сеттер, который кладёт новое значение и просит перерисовать.
Присваивать значению нельзя: память лежит в React, привязана к месту компонента в дереве, и попасть в неё можно только сеттером.
Тип выводится из начального значения; для [], null и литеральных юнионов его пишут явно — иначе состояние либо не примет ничего, либо примет что угодно.
Аргумент useState вычисляется на каждой отрисовке: дорогое начальное значение передают функцией, а не результатом.

1/4В компоненте объявлена обычная переменная let clicks = 0. Три клика увеличили её до 3, на экране по-прежнему 0. Затем соседняя кнопка вызвала сеттер состояния, компонент перерисовался. Что напечатает следующий клик?

2/4Написано const [status, setStatus] = React.useState("idle"), а допустимых значений три: idle, loading, done. Какой тип у status и что будет с опечаткой setStatus("loadnig")?

3/4В компоненте написано React.useState(readSaved()), а readSaved печатает строку в консоль. Компонент отрисовался и дважды перерисовался по клику. Сколько строк будет в выводе?

4/4На странице стоят два одинаковых <Counter />, внутри у каждого useState(0). По первому кликнули дважды. Что показывает второй?

Кнопка, которая не считает

Кнопка должна показывать число нажатий. Сейчас переменная растёт, а надпись стоит на месте. Почините счётчик, не трогая разметку.

tsx

function Likes() {
  let count = 0;

  return (
    <button id="like" onClick={() => { count += 1; }}>Нравится: {count}</button>
  );
}

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

setTimeout(() => document.getElementById("like")!.click(), 50);
setTimeout(() => document.getElementById("like")!.click(), 100);
// сейчас «Нравится: 0», а нужно «Нравится: 2»
setTimeout(() => console.log(document.getElementById("like")!.textContent), 150);

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

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

Обычная переменная не переживает вызов компонента и не сообщает React, что пора перерисовывать. Меняем её на состояние: значение читаем из пары, изменяем сеттером.

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

function Likes() {
  const [count, setCount] = React.useState(0);

  return (
    <button id="like" onClick={() => setCount(count + 1)}>Нравится: {count}</button>
  );
}

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

function Likes() {
  const [count, setCount] = React.useState(0);

  return (
    <button id="like" onClick={() => setCount(count + 1)}>Нравится: {count}</button>
  );
}

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

Разметка осталась прежней — поменялось только то, откуда берётся count и как он меняется.

Типы для пустого состояния

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

tsx

type Item = { title: string; done: boolean };

function Board() {
  const [items, setItems] = React.useState([]);
  const [current, setCurrent] = React.useState(null);

  return (
    <button
      onClick={() => {
        setItems([{ title: "Кофе", done: false }]);
        setCurrent({ title: "Кофе", done: false });
      }}
    >
      {items.length}: {current === null ? "ничего не выбрано" : current.title}
    </button>
  );
}

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

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

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

Пустой массив выводится как never[], а null — как тип null: и туда, и туда компилятор не пускает никакие значения. Оба состояния описываем явно.

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

type Item = { title: string; done: boolean };

function Board() {
  const [items, setItems] = React.useState<Item[]>([]);
  const [current, setCurrent] = React.useState<Item | null>(null);
  // дальше тело не меняется

type Item = { title: string; done: boolean };

function Board() {
  const [items, setItems] = React.useState<Item[]>([]);
  const [current, setCurrent] = React.useState<Item | null>(null);
  // дальше тело не меняется

Тип элемента у нас уже есть — Item, — и оба состояния строятся из него: список это Item[], а выбранная запись — Item | null. Проверка current === null в разметке после этого не просто вежливость: без неё компилятор не даст взять title.

Считать один раз

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

tsx

function loadDraft() {
  console.log("разбираю черновик");
  return "";
}

function Editor() {
  const [text, setText] = React.useState(loadDraft());

  return <button id="type" onClick={() => setText(text + "а")}>{text.length}</button>;
}

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

setTimeout(() => document.getElementById("type")!.click(), 50);
setTimeout(() => document.getElementById("type")!.click(), 100);
// «разбираю черновик» печатается трижды, а нужен один раз

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

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

Убираем скобки вызова: React примет функцию и позовёт её сам, только при первой отрисовке.

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

const [text, setText] = React.useState(loadDraft);

const [text, setText] = React.useState(loadDraft);

Проверка простая: после правки «разбираю черновик» печатается один раз, сколько бы кликов ни было. Если бы в состоянии должна была лежать сама функция, пришлось бы обернуть её стрелкой: useState(() => loadDraft).

useState: память компонента

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

Переменная, которой не хватаетПочему let в теле компонента ничего не меняет

useStateХук возвращает пару: значение и способ его изменить

Память живёт в ReactПрисвоить count нельзя, и это не каприз компилятора

Типы: что выводится самоКогда хватает начального значения, а когда нужен явный тип

Начальное значение считается один разАргумент useState вычисляется на каждом рендере

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

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

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

Кнопка, которая не считает

Типы для пустого состояния

Считать один раз