Por que a imutabilidade é importante no gerenciamento de estado?

Question

Accepted Answer

**Immutability** significa nunca modificar o estado no local — em vez disso, você cria um **novo** objeto/array com as alterações. Isso é central para como React, Redux e ferramentas semelhantes detectam mudanças e atualizam a UI corretamente.

## O problema com mutação

```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 (e Redux) detectam mudanças comparando **referências** (`oldState === newState`), não conteúdo profundo — para desempenho. Se você mutar no local, a referência permanece a mesma, portanto o framework pensa que nada mudou e pula a re-renderização.

## Padrões de atualização imutável

```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
```

O operador spread cria cópias rasas; para dados aninhados, você copia cada nível que altera.

## Por que a imutabilidade traz mais benefícios

```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)
```

## Ferramentas que ajudam

```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 torna atualizações imutáveis aninhadas ergonômicas, permitindo que você escreva código com aparência de mutação em um rascunho que ele converte em uma atualização imutável.

## Por que isso importa

A imutabilidade é o mecanismo que faz a detecção de mudanças baseada em referência funcionar — é *por isso* que `[...items]` dispara uma re-renderização, mas `items.push()` não.

Além da correção, ela desbloqueiam otimizações de desempenho (memoization compara referências) e recursos poderosos (undo/redo, time-travel).

Compreender padrões de atualização imutável (e ferramentas como Immer) é essencial para trabalhar corretamente com React/Redux; mutar estado é um dos erros mais comuns de iniciantes.