Как удалить элементы из массива в состоянии без мутации?

В React и Redux состояние считается неизменяемым: нельзя менять массив на месте через splice, pop или прямое присваивание по индексу. Причина в том, что React сравнивает ссылки на объекты, и если ссылка не изменилась, повторный рендер не произойдёт. Поэтому удаление элемента сводится к созданию нового массива без этого элемента.

Основные способы

• filter — самый читаемый способ, возвращает новый массив только с подходящими элементами.
• slice + spread — когда нужно удалить по индексу, а не по значению.
• toSpliced — современный метод ES2023, возвращает копию без мутации.

Пример с filter

const [items, setItems] = useState([1, 2, 3, 4]);

function removeItem(id) {
  // создаём новый массив без элемента с нужным id
  setItems(prev => prev.filter(item => item.id !== id));
}

Пример удаления по индексу

function removeAt(index) {
  setItems(prev => [
    ...prev.slice(0, index),
    ...prev.slice(index + 1)
  ]);
}

В Redux-редьюсере принцип тот же: возвращаем новое состояние, а не мутируем старое. Если используется Redux Toolkit, можно писать мутирующий код внутри createSlice — Immer под капотом создаст иммутабельную копию.

Итог: для удаления элементов из массива в состоянии используйте filter по значению или slice по индексу, чтобы всегда возвращать новую ссылку и гарантировать корректный ререндер компонента.