Как выбирать структуру состояния

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

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

tsx

function Shop() {
  const [items, setItems] = React.useState(["чай", "какао", "капучино"]);
  const [query, setQuery] = React.useState("ка");
  // «кеш» результата поиска — отдельная ячейка, как отдельная переменная в части II
  const [found, setFound] = React.useState(["какао", "капучино"]);

  const search = (text: string) => {
    setQuery(text);
    setFound(items.filter((item) => item.includes(text)));
  };
  const add = () => setItems([...items, "каркаде"]); // а found?

  return (
    <div>
      <button id="add" onClick={add}>добавить каркаде</button>
      <button onClick={() => search("ча")}>искать «ча»</button>
      <p id="out">по запросу «{query}»: {found.join(", ")}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Shop />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 150);

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

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

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

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

tsx

function Shop() {
  const [items, setItems] = React.useState(["чай", "какао", "капучино"]);
  const [query, setQuery] = React.useState("ка");
  // обычная константа: считается на каждой отрисовке, забыть пересчёт нельзя
  const found = items.filter((item) => item.includes(query));

  return (
    <div>
      <button id="add" onClick={() => setItems([...items, "каркаде"])}>добавить каркаде</button>
      <button onClick={() => setQuery("ча")}>искать «ча»</button>
      <p id="out">по запросу «{query}»: {found.join(", ")}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Shop />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 150);

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

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

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

Вопрос «не дорого ли фильтровать на каждой отрисовке» законный, но преждевременный: для сотни строк это незаметно. Когда станет заметно, есть useMemo — глава про скорость. Сперва правильная структура, потом ускорение.

Список кандидатов на выселение из состояния у всех проектов примерно один.

Хочется положить в состояние	Из чего считается	Что писать в теле компонента
`fullName`	`firstName` и `lastName`	`firstName + " " + lastName`
`doneCount`	массив задач	`tasks.filter((t) => t.done).length`
`isEmpty`	массив	`items.length === 0`
`total` корзины	список позиций	`reduce` по позициям
`canSubmit`	поля формы	`name !== "" && agreed`

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

tsx

interface BadgeProps {
  tone: string;
}

function Copied({ tone }: BadgeProps) {
  // пропс переписан в состояние — «чтобы был под рукой»
  const [color] = React.useState(tone);
  return <p id="copied">копия: {color}</p>;
}

function Direct({ tone }: BadgeProps) {
  return <p id="direct">напрямую: {tone}</p>;
}

function App() {
  const [tone, setTone] = React.useState("серый");
  return (
    <div>
      <button id="paint" onClick={() => setTone("красный")}>сделать красным</button>
      <Copied tone={tone} />
      <Direct tone={tone} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("paint")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("copied")!.textContent);
  console.log(document.getElementById("direct")!.textContent);
}, 150);

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

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

Родитель перерисовался с новым пропсом, Copied тоже был вызван заново — но useState(tone) смотрит на аргумент только при первой отрисовке; вы видели это в статье про useState, когда начальное значение считалось зря. Дальше хук возвращает свою память, а в памяти — старая копия. Компонент замер на значении, с которым его создали, и никакая перерисовка родителя его не разбудит.

Копировать пропс в состояние осмысленно ровно в одном случае: компоненту нужно только начальное значение, а дальше он живёт сам — поле получило текст черновика, и пользователь его правит. Тогда пропс так и называют: initialText, defaultTone. Имя предупреждает вызывающего: последующие изменения ты не увидишь, и это не ошибка.

Если пропс нужен в разметке — берите его из аргументов. Состояние заводят для того, что меняет сам компонент.

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

tsx

type Item = { id: number; title: string };

function Picker() {
  const [items, setItems] = React.useState<Item[]>([
    { id: 1, title: "чай" },
    { id: 2, title: "кофе" },
  ]);
  // копия выбранной записи — второй экземпляр тех же данных
  const [selected, setSelected] = React.useState<Item | null>(null);

  const rename = () =>
    setItems(items.map((item) => (item.id === 2 ? { ...item, title: "кофе в зёрнах" } : item)));

  return (
    <div>
      <button id="pick" onClick={() => setSelected(items[1])}>выбрать кофе</button>
      <button id="rename" onClick={rename}>переименовать</button>
      <p id="list">{items.map((item) => item.title).join(", ")}</p>
      <p id="out">выбрано: {selected === null ? "ничего" : selected.title}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Picker />);
setTimeout(() => document.getElementById("pick")!.click(), 50);
setTimeout(() => document.getElementById("rename")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("list")!.textContent);
  console.log(document.getElementById("out")!.textContent);
}, 200);

type Item = { id: number; title: string };

function Picker() {
  const [items, setItems] = React.useState<Item[]>([
    { id: 1, title: "чай" },
    { id: 2, title: "кофе" },
  ]);
  // копия выбранной записи — второй экземпляр тех же данных
  const [selected, setSelected] = React.useState<Item | null>(null);

const rename = () =>
    setItems(items.map((item) => (item.id === 2 ? { ...item, title: "кофе в зёрнах" } : item)));

return (
    <div>
      <button id="pick" onClick={() => setSelected(items[1])}>выбрать кофе</button>
      <button id="rename" onClick={rename}>переименовать</button>
      <p id="list">{items.map((item) => item.title).join(", ")}</p>
      <p id="out">выбрано: {selected === null ? "ничего" : selected.title}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Picker />);
setTimeout(() => document.getElementById("pick")!.click(), 50);
setTimeout(() => document.getElementById("rename")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("list")!.textContent);
  console.log(document.getElementById("out")!.textContent);
}, 200);

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

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

Список обновился, а строка «выбрано» — нет. Обработчик переименования сделал всё как положено по статье об объектах в состоянии: map вернул новый массив с новым объектом для кофе. Но в selected лежит не ссылка на «кофе из списка», а отдельный объект — тот, что был в списке в момент выбора. Два состояния описывают одну запись, и держать их в согласии придётся руками в каждом обработчике, который редактирует список.

Дублируется здесь не объект, а знание: «какая запись выбрана». Его хватает выразить одним числом — идентификатором. Саму запись находят в теле компонента, как результат поиска из первого раздела.

tsx

type Item = { id: number; title: string };

function Picker() {
  const [items, setItems] = React.useState<Item[]>([
    { id: 1, title: "чай" },
    { id: 2, title: "кофе" },
  ]);
  // в состоянии только id; сама запись ищется в списке на каждой отрисовке
  const [selectedId, setSelectedId] = React.useState<number | null>(null);
  const selected = items.find((item) => item.id === selectedId);

  const rename = () =>
    setItems(items.map((item) => (item.id === 2 ? { ...item, title: "кофе в зёрнах" } : item)));

  return (
    <div>
      <button id="pick" onClick={() => setSelectedId(2)}>выбрать кофе</button>
      <button id="rename" onClick={rename}>переименовать</button>
      <p id="list">{items.map((item) => item.title).join(", ")}</p>
      <p id="out">выбрано: {selected === undefined ? "ничего" : selected.title}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Picker />);
setTimeout(() => document.getElementById("pick")!.click(), 50);
setTimeout(() => document.getElementById("rename")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 200);

type Item = { id: number; title: string };

function Picker() {
  const [items, setItems] = React.useState<Item[]>([
    { id: 1, title: "чай" },
    { id: 2, title: "кофе" },
  ]);
  // в состоянии только id; сама запись ищется в списке на каждой отрисовке
  const [selectedId, setSelectedId] = React.useState<number | null>(null);
  const selected = items.find((item) => item.id === selectedId);

const rename = () =>
    setItems(items.map((item) => (item.id === 2 ? { ...item, title: "кофе в зёрнах" } : item)));

return (
    <div>
      <button id="pick" onClick={() => setSelectedId(2)}>выбрать кофе</button>
      <button id="rename" onClick={rename}>переименовать</button>
      <p id="list">{items.map((item) => item.title).join(", ")}</p>
      <p id="out">выбрано: {selected === undefined ? "ничего" : selected.title}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Picker />);
setTimeout(() => document.getElementById("pick")!.click(), 50);
setTimeout(() => document.getElementById("rename")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 200);

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

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

Тип у selected вывелся сам: Item | undefined — find честно предупреждает, что записи с таким id может не оказаться. Проверка на undefined в разметке не перестраховка: без неё компилятор не даст взять title, это сужение из части III. Заодно исчезла целая семья ошибок: удалили запись — выбор сам стал пустым, переименовали — переименовалось везде.

Id вместо объекта — та же мысль, что data-id в делегировании из части II: обработчик хранил не узел и не объект, а ключ, по которому всё находится.

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

tsx

function Form() {
  const [isSending, setIsSending] = React.useState(false);
  const [isError, setIsError] = React.useState(false);
  const [isSent, setIsSent] = React.useState(false);

  // первая попытка падает, вторая проходит — так изображаем ненадёжную сеть
  const send = (attempt: number) => {
    setIsSending(true);
    setTimeout(() => {
      setIsSending(false);
      if (attempt === 1) setIsError(true);
      else setIsSent(true); // а isError?
    }, 20);
  };

  return (
    <div>
      <button id="first" onClick={() => send(1)}>отправить</button>
      <button id="second" onClick={() => send(2)}>ещё раз</button>
      <p id="out">
        {isSending && "отправляем… "}
        {isError && "ошибка! "}
        {isSent && "отправлено"}
      </p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Form />);
setTimeout(() => document.getElementById("first")!.click(), 50);
setTimeout(() => document.getElementById("second")!.click(), 150);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 300);

function Form() {
  const [isSending, setIsSending] = React.useState(false);
  const [isError, setIsError] = React.useState(false);
  const [isSent, setIsSent] = React.useState(false);

// первая попытка падает, вторая проходит — так изображаем ненадёжную сеть
  const send = (attempt: number) => {
    setIsSending(true);
    setTimeout(() => {
      setIsSending(false);
      if (attempt === 1) setIsError(true);
      else setIsSent(true); // а isError?
    }, 20);
  };

return (
    <div>
      <button id="first" onClick={() => send(1)}>отправить</button>
      <button id="second" onClick={() => send(2)}>ещё раз</button>
      <p id="out">
        {isSending && "отправляем… "}
        {isError && "ошибка! "}
        {isSent && "отправлено"}
      </p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Form />);
setTimeout(() => document.getElementById("first")!.click(), 50);
setTimeout(() => document.getElementById("second")!.click(), 150);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 300);

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

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

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

Замена противоречащим флагам — одно состояние с литеральным юнионом, как в статье про useState. Стадии одного процесса по определению исключают друг друга, и одна ячейка выражает это сама: переход в новую стадию стирает предыдущую.

tsx

type Status = "idle" | "sending" | "error" | "sent";

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

  const send = (attempt: number) => {
    setStatus("sending");
    setTimeout(() => setStatus(attempt === 1 ? "error" : "sent"), 20);
  };

  // подпись на каждую стадию: забудете одну — компилятор напомнит
  const label: Record<Status, string> = {
    idle: "",
    sending: "отправляем…",
    error: "ошибка!",
    sent: "отправлено",
  };

  return (
    <div>
      <button id="first" onClick={() => send(1)}>отправить</button>
      <button id="second" onClick={() => send(2)}>ещё раз</button>
      <p id="out">{label[status]}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Form />);
setTimeout(() => document.getElementById("first")!.click(), 50);
setTimeout(() => document.getElementById("second")!.click(), 150);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 300);

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

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

Подписи собраны в Record<Status, string> из части III не ради красоты: добавите стадию "retrying" — компилятор потребует подпись и для неё. Флаги при этом не запрещены: isOpen у выпадающего списка — честное булево, оба его значения осмысленны. Подозрение должно вызывать несколько булевых про один процесс. Если ловите себя на мысли «когда это true, то вон то обязано быть false» — перед вами стадии одного статуса.

Вместе с фактом ошибки обычно нужен её текст. Хранить его отдельным состоянием errorText — снова дубликат: пустая строка при статусе «error» и текст при статусе «sent» одинаково бессмысленны. Размеченное объединение из части III кладёт текст туда, где он существует, — и компилятор не даст прочитать message у других стадий. Такие объединения пригодятся и дальше: в статье «useReducer и размеченные объединения» ими описывают действия, а все переходы между состояниями собирают в одну функцию.

ts

type Status =
  | { kind: "idle" }
  | { kind: "sending" }
  | { kind: "error"; message: string }
  | { kind: "sent" };

function describe(status: Status): string {
  // message существует только в ветке error — компилятор проверяет это за вас
  return status.kind === "error" ? "ошибка: " + status.message : status.kind;
}
console.log(describe({ kind: "error", message: "сеть недоступна" }));
console.log(describe({ kind: "sent" }));

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

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

Обратный вопрос: сколько заводить состояний? Форма с тремя полями — три useState или один объект? React не настаивает ни на чём, но у объекта есть цена, и компилятор её показывает.

tsx

function Signup() {
  // вся форма — один объект
  const [form, setForm] = React.useState({ name: "", email: "", agreed: false });

  return (
    <div>
      <button onClick={() => setForm({ name: "Рико" })}>представиться</button>
      <p>{form.name} {form.email} {form.agreed ? "согласен" : ""}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Signup />);

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

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

Компилятор требует email и agreed: частичного обновления у объекта в состоянии нет, только замена целиком, — поэтому в статье об объектах в состоянии каждое изменение начиналось с { ...form, ... }. Для трёх полей, которые меняются каждое от своей кнопки, это налог без выгоды. Разделите их — и копировать станет нечего.

tsx

function Signup() {
  // поля меняются независимо — каждому своя ячейка, копировать нечего
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [agreed, setAgreed] = React.useState(false);
  // производное: считается, а не хранится
  const canSubmit = name !== "" && email.includes("@") && agreed;

  return (
    <div>
      <button onClick={() => setName("Рико")}>представиться</button>
      <button onClick={() => setEmail("rico@example.com")}>указать почту</button>
      <button onClick={() => setAgreed(true)}>согласиться</button>
      <button disabled={!canSubmit}>отправить</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Signup />);

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

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

Обратная ситуация — значения, которые всегда меняются одним движением: координаты указателя, начало и конец выделения, ответ сервера, который приходит целиком. Их разделять вредно: два set в одном обработчике объединятся в одну отрисовку, но второй вызов легко забыть, и точка окажется с новым x и старым y. Правило симметричное: вместе — то, что меняется вместе; порознь — то, что меняется порознь.

Значения	Как меняются	Структура
`x` и `y` указателя	всегда одним движением	один объект `{ x, y }`
`name`, `email`, `agreed` формы	каждое от своего поля	три `useState`
`from` и `to` выделения	вместе	один объект
`items` и `query`	независимо	два `useState`
ответ сервера `user`	приходит целиком	один объект, как пришёл

Третья крайность — объект в объекте в объекте: категория содержит подкатегории, те — товары. Чтобы поменять название одного товара, придётся скопировать весь путь от корня до него — по правилам неизменяемости из статьи об объектах в состоянии. Выход тот же, что с выбранной записью: плоский словарь по id, где связи хранятся ключами. Изменение одного узла трогает одну запись.

ts

// вложенное дерево: чтобы изменить лист, придётся скопировать весь путь до корня
type TreeNode = { id: number; title: string; children: TreeNode[] };

// плоский словарь: у каждого узла свой ключ, изменение трогает одну запись
type FlatNode = { id: number; title: string; childIds: number[] };
type Tree = Record<number, FlatNode>;

const tree: Tree = {
  1: { id: 1, title: "напитки", childIds: [2, 3] },
  2: { id: 2, title: "чай", childIds: [] },
  3: { id: 3, title: "кофе", childIds: [] },
};
const renamed: Tree = { ...tree, 3: { ...tree[3], title: "кофе в зёрнах" } };
console.log(renamed[1].childIds.map((id) => renamed[id].title));

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

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

В состоянии лежит только то, что нельзя вычислить из остального состояния и пропсов; всё производное — константы в теле компонента, они пересчитываются на каждой отрисовке сами.
Пропс попадает в useState один раз: если значение нужно в разметке — читайте пропс, а «только начальное» называйте initialX.
Одна запись в двух состояниях расходится при первом же редактировании: храните id, а запись находите в списке через find.
Несколько булевых про один процесс допускают бессмысленные сочетания; стадии описывают одним состоянием с литеральным юнионом.
Вместе — то, что меняется вместе; порознь — то, что меняется независимо. Один объект заставляет копировать все поля при каждом изменении, и компилятор напомнит об этом.

1/4В компоненте есть состояние tasks и состояние doneCount, которое обновляется в обработчике «отметить готовой». Добавили обработчик удаления, который меняет только tasks. Что покажет doneCount после удаления готовой задачи?

2/4Компонент получает пропс title и делает const [text] = React.useState(title). Родитель перерисовался и передал новый title. Что покажет компонент?

3/4В состоянии лежат items: Item[] и selected: Item | null — копия выбранной записи. Запись переименовали через setItems(items.map(...)). Что произойдёт с selected?

4/4Для загрузки данных заведены isLoading, isError и data. Что здесь признак, что структуру стоит пересмотреть?

Счётчик готовых

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

tsx

type Task = { id: number; title: string; done: boolean };

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "чай", done: false },
    { id: 2, title: "кофе", done: false },
  ]);
  const [doneCount, setDoneCount] = React.useState(0);

  const finish = (id: number) => {
    setTasks(tasks.map((t) => (t.id === id ? { ...t, done: true } : t)));
    setDoneCount(doneCount + 1);
  };
  const remove = (id: number) => setTasks(tasks.filter((t) => t.id !== id));

  return (
    <div>
      <button id="finish" onClick={() => finish(1)}>закончить чай</button>
      <button id="remove" onClick={() => remove(1)}>удалить чай</button>
      <p id="out">готово: {doneCount} из {tasks.length}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("finish")!.click(), 50);
setTimeout(() => document.getElementById("remove")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent); // готово: 1 из 1, а нужно готово: 0 из 1
}, 200);

type Task = { id: number; title: string; done: boolean };

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "чай", done: false },
    { id: 2, title: "кофе", done: false },
  ]);
  const [doneCount, setDoneCount] = React.useState(0);

const finish = (id: number) => {
    setTasks(tasks.map((t) => (t.id === id ? { ...t, done: true } : t)));
    setDoneCount(doneCount + 1);
  };
  const remove = (id: number) => setTasks(tasks.filter((t) => t.id !== id));

return (
    <div>
      <button id="finish" onClick={() => finish(1)}>закончить чай</button>
      <button id="remove" onClick={() => remove(1)}>удалить чай</button>
      <p id="out">готово: {doneCount} из {tasks.length}</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("finish")!.click(), 50);
setTimeout(() => document.getElementById("remove")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent); // готово: 1 из 1, а нужно готово: 0 из 1
}, 200);

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

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

Число готовых целиком вычисляется из массива задач, поэтому в состоянии ему делать нечего. Убираем doneCount из useState и считаем его в теле компонента; обработчик finish при этом перестаёт помнить про счётчик, а remove ничего и не знал.

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

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "чай", done: false },
    { id: 2, title: "кофе", done: false },
  ]);
  // считается из tasks на каждой отрисовке — забыть обновить нельзя
  const doneCount = tasks.filter((t) => t.done).length;

  const finish = (id: number) =>
    setTasks(tasks.map((t) => (t.id === id ? { ...t, done: true } : t)));
  const remove = (id: number) => setTasks(tasks.filter((t) => t.id !== id));
  // разметка не меняется
}

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "чай", done: false },
    { id: 2, title: "кофе", done: false },
  ]);
  // считается из tasks на каждой отрисовке — забыть обновить нельзя
  const doneCount = tasks.filter((t) => t.done).length;

  const finish = (id: number) =>
    setTasks(tasks.map((t) => (t.id === id ? { ...t, done: true } : t)));
  const remove = (id: number) => setTasks(tasks.filter((t) => t.id !== id));
  // разметка не меняется
}

После правки вывод — «готово: 0 из 1». Любой будущий обработчик — «отметить все», «очистить готовые» — тоже не сможет сломать счётчик: ему просто нечего забыть.

Плеер с двумя флагами

Плеер хранит isPlaying и isPaused. Нажали «играть», потом «пауза» — и абзац сообщает «играет на паузе». Замените два флага одним состоянием так, чтобы такое сообщение стало невозможным, а не просто маловероятным.

tsx

function Player() {
  const [isPlaying, setIsPlaying] = React.useState(false);
  const [isPaused, setIsPaused] = React.useState(false);

  const play = () => setIsPlaying(true);
  const pause = () => setIsPaused(true);

  return (
    <div>
      <button id="play" onClick={play}>играть</button>
      <button id="pause" onClick={pause}>пауза</button>
      <p id="out">
        {isPlaying && "играет "}
        {isPaused && "на паузе "}
        {!isPlaying && !isPaused && "остановлен"}
      </p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Player />);
setTimeout(() => document.getElementById("play")!.click(), 50);
setTimeout(() => document.getElementById("pause")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent); // «играет на паузе», а нужно «на паузе»
}, 200);

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

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

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

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

type Mode = "stopped" | "playing" | "paused";

function Player() {
  const [mode, setMode] = React.useState<Mode>("stopped");
  const label: Record<Mode, string> = {
    stopped: "остановлен",
    playing: "играет",
    paused: "на паузе",
  };

  return (
    <div>
      <button id="play" onClick={() => setMode("playing")}>играть</button>
      <button id="pause" onClick={() => setMode("paused")}>пауза</button>
      <p id="out">{label[mode]}</p>
    </div>
  );
}

type Mode = "stopped" | "playing" | "paused";

function Player() {
  const [mode, setMode] = React.useState<Mode>("stopped");
  const label: Record<Mode, string> = {
    stopped: "остановлен",
    playing: "играет",
    paused: "на паузе",
  };

  return (
    <div>
      <button id="play" onClick={() => setMode("playing")}>играть</button>
      <button id="pause" onClick={() => setMode("paused")}>пауза</button>
      <p id="out">{label[mode]}</p>
    </div>
  );
}

Если позже понадобится режим «загрузка», его добавляют в Mode — и компилятор потребует подпись в label, а заодно найдёт все места, где режимы перебираются без учёта нового.

Приветствие, которое не обновляется

Родитель после «входа» передаёт новое имя, а приветствие продолжает обращаться к гостю. Найдите лишнюю строку и почините, не трогая родителя.

tsx

interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  const [who] = React.useState(name);
  return <p id="out">Привет, {who}!</p>;
}

function App() {
  const [name, setName] = React.useState("гость");
  return (
    <div>
      <button id="login" onClick={() => setName("Рико")}>войти</button>
      <Greeting name={name} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("login")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent); // Привет, гость!, а нужно Привет, Рико!
}, 150);

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

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

Строка React.useState(name) скопировала пропс один раз и больше к нему не возвращалась. Имя компонент не меняет сам — значит, состояние ему не нужно, пропс читается напрямую.

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

function Greeting({ name }: GreetingProps) {
  return <p id="out">Привет, {name}!</p>;
}

function Greeting({ name }: GreetingProps) {
  return <p id="out">Привет, {name}!</p>;
}

Копия имела бы смысл, если бы компонент давал имя редактировать и хотел начать с переданного; тогда пропс назвали бы initialName, чтобы вызывающий не ждал от него обновлений.

Как выбирать структуру состояния

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

То, что вычисляется, в состоянии не хранятКеш результата расходится с источником

Копия пропсаuseState(prop) читает пропс один раз и больше к нему не возвращается

Одна запись в двух местахВыбранную запись хранят как id, а не как копию

Флаги, которые противоречат друг другуТри булевых — восемь сочетаний, осмысленных три

Один объект или несколько useStateВместе то, что меняется вместе

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

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

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

Счётчик готовых

Плеер с двумя флагами

Приветствие, которое не обновляется