Как правильно хранить список элементов в состоянии компонента?

В React важно соблюдать принцип неизменяемости состояния.

1) Хранение списка

Обычно используется массив:

const [items, setItems] = useState([]);

2) Почему нельзя изменять массив напрямую

Неправильно:

items.push(newItem);
setItems(items); // React может не заметить изменение

Проблемы:

1. Ссылка на массив не меняется.

2. React может пропустить обновление.

3) Правильный способ

Создание нового массива:

setItems([...items, newItem]);

Удаление:

setItems(items.filter(i => i.id !== id));

Обновление:

setItems(items.map(i =>
  i.id === id ? { ...i, name: "New" } : i
));

4) Почему это важно

1. React сравнивает ссылки.

2. Это ускоряет diffing.

3. Код становится предсказуемым.

Вывод: список в React нужно хранить в state и обновлять через создание нового массива, чтобы React корректно определял изменения.