Почему иммутабельность важна в управлении состоянием?

Question

Accepted Answer

**Immutability** означает никогда не изменять состояние на месте — вместо этого вы создаёте **новый** объект/массив с изменениями. Это центрально для того, как React, Redux и подобные инструменты обнаруживают изменения и правильно обновляют UI.

## Проблема с мутацией

```jsx
// ❌ mutating — React doesn't detect the change
function addItem(item) {
  items.push(item);   // same array reference → React sees "no change" → no re-render
  setItems(items);    // passing the same reference back
}

// ✅ immutable — a NEW array, new reference → React re-renders
function addItem(item) {
  setItems([...items, item]); // create a new array
}
```

React (и Redux) обнаруживают изменения, сравнивая **ссылки** (`oldState === newState`), а не глубокое содержимое — для производительности. Если вы мутируете на месте, ссылка остаётся той же, поэтому фреймворк думает, что ничего не изменилось, и пропускает перерисовку.

## Паттерны неизменяемого обновления

```js
// arrays
setItems([...items, newItem]);                  // add
setItems(items.filter(i => i.id !== id));        // remove
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // update one

// objects
setUser({ ...user, name: "Bob" });               // update a field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // nested update
```

Оператор spread создаёт поверхностные копии; для вложенных данных вы копируете каждый уровень, который изменяете.

## Почему иммутабельность приносит больше преимуществ

```text
✓ Reliable change detection → correct, efficient re-renders (reference equality)
✓ Enables performance optimizations (React.memo, OnPush, useMemo) that compare references
✓ Predictable state — old state is never altered, easing debugging
✓ Time-travel debugging & undo/redo (keep past state snapshots)
```

## Инструменты, которые помогают

```js
// Immer (used by Redux Toolkit) lets you "mutate" a draft → produces an immutable result
produce(state, draft => { draft.items.push(item); }); // safe + readable
```

Immer делает вложенные неизменяемые обновления эргономичными, позволяя вам писать выглядящий как мутация код на черновике, который он преобразует в неизменяемое обновление.

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

Иммутабельность — это механизм, который заставляет работать обнаружение изменений на основе ссылок — это *почему* `[...items]` срабатывает перерисовка, но `items.push()` нет.

Беспокойства от правильности, она разблокирует оптимизации производительности (memoization сравнивает ссылки) и мощные возможности (undo/redo, time-travel).

Понимание паттернов неизменяемого обновления (и инструментов типа Immer) необходимо для правильной работы с React/Redux; мутация состояния — одна из самых распространённых ошибок новичков.