Причины, почему обновление массива в React «не меняет» состояние, и практические решения.
1) Прямое изменение (мутация) состояния
- Проблема: вызываете методы, которые мутируют массив/объект (например, `push`, `splice`, `sort`, присвоение по индексу), и затем вызываете `setState` с той же ссылкой или вообще не создаёте новую ссылку — React не увидит изменения по ссылочной (shallow) проверке.
- Неправильно:
```
items.push(newItem);
setItems(items); // мутировали и передали ту же ссылку
```
- Правильно:
```
setItems(prev => [...prev, newItem]); // новый массив
// или при замене элемента:
setItems(prev => prev.map(it => it.id === id ? {...it, value: newValue} : it));
```
2) Передача той же ссылки (referential equality)
- Причина: вы создаёте новый объект, но внутри всё равно используете те же вложенные объекты (или возвращаете тот же массив).
- Решение: создавайте новый объект/массив рекурсивно по месту изменения (shallow copy для уровня изменения). Для сложных структур используйте `structuredClone`, `immer` или ручное копирование.
3) Неправильное использование индекса как ключа в списках
- Проблема: `key={index}` при рендере списка; при удалении/перестановке элементов React может повторно использовать DOM-узлы и визуально элементы останутся «необновлёнными».
- Решение: используйте стабильные уникальные ключи: `key={item.id}`.
- Пример:
```
// плохо:
items.map((item, index) =>{item.text})
// хорошо:
items.map(item =>{item.text})
```
4) Нужен функциональный апдейтер, если опираетесь на предыдущее состояние
- Проблема: асинхронность обновлений и батчинг может привести к использованию устаревшего значения:
```
// проблемно при быстром последовательном вызове
setCount(count + 1);
setCount(count + 1);
```
- Решение: использовать функциональный апдейтер:
```
setCount(c => c + 1);
// для массива:
setItems(prev => [...prev, newItem]);
```
5) useState с объектом vs class setState
- Особенность: `setState` в классах делает merge, `useState` заменяет значение целиком.
- Ошибка:
```
const [state, setState] = useState({a:1, b:2});
setState({a:2}); // потеряли b
```
- Правильно:
```
setState(prev => ({...prev, a:2}));
```
6) Мутация вложенных объектов
- Проблема: вы копируете массив, но изменяете объект внутри без копирования — его ссылка не меняется.
- Решение:
```
setItems(prev => prev.map(it => it.id === id ? {...it, prop: newVal} : it
));
```
7) shouldComponentUpdate / React.memo / PureComponent и shallow comparison
- Причина: компонент не рендерится потому что props shallow-equal. Если передаёте тот же массив (та же ссылка), мемоизированный компонент не обновится.
- Решение: гарантировать новую ссылку для изменённых данных; при необходимости менять мемоизацию.
8) Чтение состояния сразу после setState
- Пометка: setState асинхронен — читать новое значение сразу после вызова нельзя; используйте useEffect или callback (для классов) либо функциональный апдейтер.
9) Ошибки в ключевых местах: фильтрация/сортировка без копии
- Проблема: вызов `items.sort()` мутирует массив.
- Решение: `setItems(prev => [...prev].sort(compareFn));`
Резюме — чеклист для отладки
- Не мутируйте: используйте spread/`map`/`filter`/`slice` или библиотеки (immer).
- Всегда создавайте новую ссылку для изменённого массива/объекта.
- Используйте функциональный апдейтер, если новое состояние зависит от предыдущего.
- Используйте стабильные уникальные ключи в списках (не `index`).
- Проверьте мемоизацию и shallow-compare (React.memo, PureComponent).
- Помните про асинхронность setState (чтение/последовательные вызовы).
Если нужно — пришлите фрагмент вашего кода, разберу конкретную проблему.