Объекты и массивы в состоянии

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

Список задач лежит в состоянии массивом. Обработчик кнопки делает с ним то же, что делал код доски в части II, — push. Перед запуском ответьте: сколько пунктов окажется на экране и сколько раз напечатается «отрисовка».

tsx

function TodoList() {
  const [tasks] = React.useState(["Прочитать часть II"]);
  console.log("отрисовка, задач:", tasks.length);
  const add = () => {
    tasks.push("Написать компонент");
    console.log("в массиве задач:", tasks.length);
  };
  return (
    <div>
      <ul>
        {tasks.map((t) => <li key={t}>{t}</li>)}
      </ul>
      <button id="add" onClick={add}>добавить</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<TodoList />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => console.log("пунктов на экране:", document.querySelectorAll("li").length), 150);

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

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

В массиве две задачи, на экране одна, и второй строки «отрисовка» нет. В части II после push вы звали render() сами, и разметка перестраивалась из того, что лежит в состоянии, — каким бы способом оно ни поменялось. В React такой команды нет: единственный способ попросить отрисовку — сеттер. Добавим его.

tsx

function TodoList() {
  const [tasks, setTasks] = React.useState(["Прочитать часть II"]);
  console.log("отрисовка, задач:", tasks.length);
  const add = () => {
    tasks.push("Написать компонент");
    setTasks(tasks); // тот же массив, но теперь через сеттер
  };
  return (
    <div>
      <ul>
        {tasks.map((t) => <li key={t}>{t}</li>)}
      </ul>
      <button id="add" onClick={add}>добавить</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<TodoList />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => console.log("пунктов на экране:", document.querySelectorAll("li").length), 150);

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

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

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

Сеттер — не команда «перерисуй». Это заявка «вот новое значение», и React вправе решить, что новое совпадает со старым.

Правило одно и очень дешёвое: новое значение сравнивается со старым через Object.is. Для чисел и строк это сравнение по значению — setCount(5) при пятёрке в состоянии ничего не сделает, и это разумно. Для объектов и массивов Object.is сравнивает ссылки: одно ли это место в памяти. Про ссылки вы читали в части I; здесь они из ловушки превращаются в рабочий инструмент.

ts

const tasks = ["Прочитать часть II"];

const same = tasks;
same.push("Написать компонент");
console.log(Object.is(same, tasks));

const copy = [...tasks];
console.log(Object.is(copy, tasks));

console.log(Object.is({ a: 1 }, { a: 1 }));
console.log(Object.is(5, 5));

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

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

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

Мутация при этом никуда не пропадает: массив в памяти React изменён, просто отрисовки не было. Она случится по любому другому поводу — и покажет всё, что накопилось. Ниже вторая кнопка меняет своё, отдельное состояние. Что будет в списке после неё?

tsx

function TodoList() {
  const [tasks, setTasks] = React.useState(["Прочитать часть II"]);
  const [clicks, setClicks] = React.useState(0);
  console.log("отрисовка: задач", tasks.length, "кликов", clicks);
  const add = () => {
    tasks.push("Написать компонент");
    setTasks(tasks);
  };
  return (
    <div>
      <ul>
        {tasks.map((t) => <li key={t}>{t}</li>)}
      </ul>
      <button id="add" onClick={add}>добавить</button>
      <button id="count" onClick={() => setClicks(clicks + 1)}>кликов: {clicks}</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<TodoList />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => console.log("после «добавить»:", document.querySelectorAll("li").length), 100);
setTimeout(() => document.getElementById("count")!.click(), 150);
setTimeout(() => console.log("после «кликов»:", document.querySelectorAll("li").length), 250);

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

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

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

Что передали в set	Что видит Object.is	Отрисовка
`setCount(count)`	то же число	нет
`setTasks(tasks)` после `push`	та же ссылка	нет — и push остаётся невидимым
`setTasks([...tasks, task])`	новая ссылка	да
`setUser({ ...user })` без изменений	новая ссылка	да, хотя показывать нечего

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

tsx

function TodoList() {
  const [tasks, setTasks] = React.useState(["Прочитать часть II"]);
  console.log("отрисовка, задач:", tasks.length);
  const add = () => {
    // новый массив: старый остаётся нетронутым в предыдущем снимке
    setTasks([...tasks, "Написать компонент"]);
  };
  return (
    <div>
      <ul>
        {tasks.map((t) => <li key={t}>{t}</li>)}
      </ul>
      <button id="add" onClick={add}>добавить</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<TodoList />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => console.log("пунктов на экране:", document.querySelectorAll("li").length), 150);

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

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

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

С объектом то же самое: { ...user, city: "Казань" } — копия, в которой переписано одно поле. Здесь у копирования есть приятный побочный эффект: поле пишется в литерале, а литерал компилятор проверяет на лишние свойства — вы видели это в части III. В примере ниже опечатка в имени поля. Что скажет компилятор и что напечатает пример?

tsx

interface Profile {
  name: string;
  city: string;
}

function Card() {
  const [user, setUser] = React.useState<Profile>({ name: "Рико", city: "Москва" });
  console.log("отрисовка:", user.name, user.city);
  const move = () => {
    setUser({ ...user, cty: "Казань" });
  };
  return <button id="move" onClick={move}>{user.name}, {user.city}</button>;
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Card />);
setTimeout(() => document.getElementById("move")!.click(), 50);

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

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

Компилятор находит лишнее поле: «Объектный литерал может использовать только известные свойства. "cty" не существует в типе "SetStateAction<Profile>"». Назван не Profile, а SetStateAction<Profile> — аргумент сеттера, знакомый по прошлым статьям; сверка идёт с формой состояния. Пример всё равно выполняется, и вторая отрисовка честно печатает «Рико Москва»: ссылка новая, React перерисовал, а город не сменился — в состоянии появилось поле cty, которое никто не читает. В части II такая опечатка молча жила бы в объекте до первого недоумения пользователя. Исправьте cty на city и запустите ещё раз.

Если новое значение зависит от старого — а при копировании это всегда так, — годится и обновитель из статьи «Функция-обновитель и очередь обновлений»: setTasks((t) => [...t, task]). Он спасает, когда добавлений в одном событии несколько или они отложены.

Нужно	Меняет на месте — не годится	Возвращает новый массив
добавить	`push`, `unshift`	`[...arr, x]`, `[x, ...arr]`
удалить	`pop`, `shift`, `splice`	`filter`, `slice`, `toSpliced`
заменить элемент	`arr[i] = x`	`map`, `with`
упорядочить	`sort`, `reverse`	`toSorted`, `toReversed`, `[...arr].sort()`

Правая колонка — целиком из части I, кроме четырёх новичков: toSorted, toReversed, toSpliced и with добавлены в ES2023 как раз для такого кода. Они делают то же, что старые собратья, но не трогают исходный массив, а возвращают новый.

Мутировать можно то, что создали только что и никому не отдали: const next = [...tasks]; next.push(x); setTasks(next) — честный код. Опасна мутация того, что уже лежит в состоянии.

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

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

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "Прочитать часть II", done: false },
  ]);
  // прошлые состояния — для кнопки «отменить»
  const [past, setPast] = React.useState<Task[][]>([]);

  const toggleFirst = () => {
    setPast([...past, tasks]); // откладываем текущий снимок
    tasks[0].done = !tasks[0].done; // меняем задачу на месте
    setTasks([...tasks]);
  };

  console.log("отрисовка: done =", tasks[0].done, "| в истории:", past.map((p) => p[0].done));
  return <button id="toggle" onClick={toggleFirst}>{tasks[0].done ? "сделано" : "не сделано"}</button>;
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

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

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

На экране всё верно, а в истории ложь: там лежит done = true, хотя откладывали снимок с false. Массив в past старый, но задача внутри него — та же самая, что и в новом массиве, и присваивание переписало её в обоих. «Отменить» теперь вернёт то, что и так на экране. Так же ломается всё, что держит ссылку на прошлый снимок: сравнение «было / стало», отложенный обработчик, дочерний компонент, который решил не перерисовываться.

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

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "Прочитать часть II", done: false },
  ]);
  const [past, setPast] = React.useState<Task[][]>([]);

  const toggleFirst = () => {
    setPast([...past, tasks]);
    // новый массив и новый объект для одной задачи; остальные — прежние ссылки
    setTasks(tasks.map((t) => (t.id === 1 ? { ...t, done: !t.done } : t)));
  };

  console.log("отрисовка: done =", tasks[0].done, "| в истории:", past.map((p) => p[0].done));
  return <button id="toggle" onClick={toggleFirst}>{tasks[0].done ? "сделано" : "не сделано"}</button>;
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

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

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

Для вложенного объекта путь тот же, только вместо map — spread на каждом уровне: setUser({ ...user, address: { ...user.address, city: "Казань" } }). Два уровня читаются нормально, три — уже с трудом; что делать глубже, чуть ниже.

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

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

Второй — библиотека Immer: produce(state, (draft) => { draft.address.city = "Казань"; }) выглядит как мутация, а возвращает новое состояние с копиями ровно по изменённому пути. В песочнице её не запустить — импорты недоступны, — но в проекте это одна зависимость.

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

Пока состояние описано типом Task[], компилятор считает push законным — для обычного массива он и есть законный. Но тип состояния выбираете вы. Объявите его как readonly Task[], и мутация станет ошибкой сборки, а не сюрпризом в интерфейсе. Прежде чем запускать, решите: какие из трёх обработчиков компилятор отвергнет?

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

function Board() {
  const [tasks, setTasks] = React.useState<readonly Task[]>([
    { id: 1, title: "Прочитать часть II", done: false },
  ]);

  const addBad = () => {
    tasks.push({ id: 2, title: "Написать компонент", done: false });
  };
  const addGood = () => {
    setTasks([...tasks, { id: 2, title: "Написать компонент", done: false }]);
  };
  const toggleBad = () => {
    tasks[0].done = true;
  };

  return (
    <div>
      <p>задач: {tasks.length}</p>
      <button onClick={addBad}>push</button>
      <button onClick={addGood}>копия</button>
      <button onClick={toggleBad}>done = true</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);

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

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

Отвергнут только push: «Свойство "push" не существует в типе "readonly Task[]"». У readonly-массива просто нет методов, меняющих его на месте, — зато остались все, что возвращают новый: map, filter, toSorted, spread. Обычный массив в readonly подставляется без слов, поэтому addGood прошёл.

А вот tasks[0].done = true прошло молча — и это то самое «обещание глубиной в один уровень» из части III. Readonly у массива запрещает трогать массив, а не его элементы: тип элемента по-прежнему Task с обычными полями. Чтобы замок стоял и на полях, их тоже помечают.

tsx

interface Task {
  readonly id: number;
  readonly title: string;
  readonly done: boolean;
}

function Board() {
  const [tasks, setTasks] = React.useState<readonly Task[]>([
    { id: 1, title: "Прочитать часть II", done: false },
  ]);

  const toggleBad = () => {
    tasks[0].done = true;
  };
  const toggleGood = () => {
    setTasks(tasks.map((t) => (t.id === 1 ? { ...t, done: !t.done } : t)));
  };
  const sorted = tasks.toSorted((a, b) => a.title.localeCompare(b.title));

  return (
    <div>
      <p>{sorted.map((t) => t.title).join(", ")}</p>
      <button onClick={toggleBad}>на месте</button>
      <button onClick={toggleGood}>копией</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);

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

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

«Не удается задать значение для "done", так как это свойство, доступное только для чтения» — и мутация вложенного объекта тоже поймана до запуска. Копирующий обработчик при этом компилируется: spread собирает новый объект, а литерал с readonly-полями создавать никто не запрещает — запрещено только менять их потом. Писать readonly перед каждым полем не обязательно: Readonly<Task> из части III делает то же одним словом.

readonly живёт только в типах: собранный JavaScript выполнит push как ни в чём не бывало, вы видели это в части III. Поэтому примеры с ошибкой всё равно запускаются.

Подстановка работает в одну сторону: обычный массив годится вместо readonly, обратное — нет. Функция с параметром Task[] readonly-состояние не примет, и компилятор скажет: «Аргумент типа "readonly Task[]" нельзя назначить параметру типа "Task[]"», а причиной назовёт: «Тип "readonly Task[]" является "readonly" и не может быть назначен изменяемому типу "Task[]"».

ts

interface Task {
  readonly id: number;
  readonly done: boolean;
}

function countDone(list: Task[]) {
  return list.filter((t) => t.done).length;
}

const tasks: readonly Task[] = [{ id: 1, done: true }];
console.log(countDone(tasks));

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

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

Это подсказка не про состояние, а про функцию: раз она ничего не мутирует, её параметр должен быть readonly Task[] — тогда она примет и то и другое. Так readonly в состоянии постепенно наводит порядок в сигнатурах вокруг.

Сеттер сравнивает новое значение со старым через Object.is: для объектов и массивов это сравнение ссылок, содержимое React не сверяет.
Мутация — push, splice, присваивание в поле — оставляет ссылку прежней, и React не перерисовывает; изменение всплывёт при следующей чужой отрисовке.
Состояние меняют копированием: spread, map, filter и методы ES2023 toSorted, toReversed, toSpliced, with возвращают новый массив, не трогая старый.
Spread копирует один уровень; вложенный объект нужно копировать по всему пути от корня до изменённого поля, иначе прошлые снимки испортятся.
readonly Task[] и readonly-поля превращают мутацию в ошибку компилятора; копирующие методы и подстановка обычного массива при этом остаются.

1/4В обработчике две строки: tasks.push(task), затем setTasks(tasks). Что произойдёт после клика?

2/4Состояние user — объект. Обработчик вызывает setUser({ ...user }), не меняя ни одного поля. Будет ли отрисовка?

3/4Обработчик делает const next = { ...user }; next.address.city = "Казань"; setUser(next). Что здесь не так?

4/4Состояние объявлено как useState<readonly Task[]>([]). Что скажет компилятор на setTasks([...tasks, task])?

Галочка, которая не ставится

Клик по задаче должен переключать её done. Обработчик находит задачу, меняет поле, вызывает сеттер — а галочка не появляется. Почините, не меняя разметку.

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "Прочитать часть II", done: false },
    { id: 2, title: "Написать компонент", done: false },
  ]);
  const toggle = (id: number) => {
    const task = tasks.find((t) => t.id === id);
    if (task) task.done = !task.done;
    setTasks(tasks);
  };
  return (
    <ul>
      {tasks.map((t) => (
        <li key={t.id} id={"task-" + t.id} onClick={() => toggle(t.id)}>
          {t.done ? "[x] " : "[ ] "}
          {t.title}
        </li>
      ))}
    </ul>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("task-2")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("task-2")!.textContent); // [ ] Написать компонент, а нужно [x] Написать компонент
}, 150);

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

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

Задача изменена на месте, а в сеттер ушёл тот же массив: Object.is даёт true, отрисовки нет. Нужны новая ссылка на массив и новый объект для изменённой задачи — это один map.

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

const toggle = (id: number) => {
  setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
};

const toggle = (id: number) => {
  setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
};

Остальные задачи map возвращает прежними ссылками — копировать их незачем. Проверка через 150 мс напечатает [x] Написать компонент.

Удаление без splice

Кнопка «убрать» должна удалять задачу с id === 1. Автор вспомнил splice из части I — и список не изменился. Перепишите обработчик так, чтобы состояние не мутировалось, и назовите второй способ, кроме того, что выбрали.

tsx

interface Task {
  id: number;
  title: string;
}

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([
    { id: 1, title: "Прочитать часть II" },
    { id: 2, title: "Написать компонент" },
  ]);
  const remove = (id: number) => {
    const index = tasks.findIndex((t) => t.id === id);
    tasks.splice(index, 1);
    setTasks(tasks);
  };
  return (
    <div>
      <ul>
        {tasks.map((t) => <li key={t.id}>{t.title}</li>)}
      </ul>
      <button id="remove" onClick={() => remove(1)}>убрать первую</button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);
setTimeout(() => document.getElementById("remove")!.click(), 50);
setTimeout(() => {
  console.log("пунктов:", document.querySelectorAll("li").length); // 2, а нужно 1
}, 150);

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

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

Самый прямой способ — filter: он возвращает новый массив без лишнего элемента и не требует искать индекс.

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

const remove = (id: number) => {
  setTasks(tasks.filter((t) => t.id !== id));
};

const remove = (id: number) => {
  setTasks(tasks.filter((t) => t.id !== id));
};

Второй способ — toSpliced из ES2023: та же подпись, что у splice, но исходный массив не трогается, а возвращается новый: setTasks(tasks.toSpliced(index, 1)). Он уместен, когда индекс уже известен, — например, при удалении по позиции в списке.

Замок на состояние

В компоненте два обработчика мутируют состояние, и компилятор молчит. Измените только типы так, чтобы обе строки с мутацией стали ошибками сборки, а обработчик addGood продолжил компилироваться.

tsx

interface Task {
  id: number;
  done: boolean;
}

function Board() {
  const [tasks, setTasks] = React.useState<Task[]>([{ id: 1, done: false }]);

  const addBad = () => {
    tasks.push({ id: 2, done: false }); // должно стать ошибкой
  };
  const toggleBad = () => {
    tasks[0].done = true; // и это тоже
  };
  const addGood = () => {
    setTasks([...tasks, { id: 2, done: false }]); // а это — остаться
  };

  return (
    <div>
      <button onClick={addBad}>push</button>
      <button onClick={toggleBad}>done</button>
      <button onClick={addGood}>копия</button>
      <span>{tasks.length}</span>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);

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

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

Два замка на двух уровнях: readonly у массива против push и readonly у полей против присваивания.

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

interface Task {
  readonly id: number;
  readonly done: boolean;
}

const [tasks, setTasks] = React.useState<readonly Task[]>([{ id: 1, done: false }]);

interface Task {
  readonly id: number;
  readonly done: boolean;
}

const [tasks, setTasks] = React.useState<readonly Task[]>([{ id: 1, done: false }]);

Компилятор ответит двумя диагностиками: «Свойство "push" не существует в типе "readonly Task[]"» и «Не удается задать значение для "done", так как это свойство, доступное только для чтения». addGood цел: spread собирает новый обычный массив, а он подставляется вместо readonly. Вместо пометок в интерфейсе можно оставить Task как есть и написать useState<ReadonlyArray<Readonly<Task>>> — тот же замок, собранный из утилит части III.

Объекты и массивы в состоянии

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

push, после которого ничего не произошлоМассив изменился, экран — нет

Чем React сравниваетObject.is: ссылка, а не содержимое

Скопировать и изменить копиюspread, map и filter вместо push, splice и присваивания

Копия глубиной в один уровеньВложенный объект достаётся обоим снимкам

readonly: компилятор против мутацииПусть push и присваивание в поле не проходят сборку

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

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

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

Галочка, которая не ставится

Удаление без splice

Замок на состояние