¿Por qué es importante la inmutabilidad en la gestión de estado?

Question

Accepted Answer

**La inmutabilidad** significa nunca modificar el estado en su lugar — en cambio, creas un objeto/array **nuevo** con los cambios. Esto es central en cómo React, Redux y herramientas similares detectan cambios y actualizan la interfaz de usuario correctamente.

## El problema con la mutación

```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 (y Redux) detectan cambios comparando **referencias** (`oldState === newState`), no contenido profundo — por rendimiento. Si mutás en su lugar, la referencia sigue siendo la misma, así que el framework piensa que nada cambió y omite el re-render.

## Patrones de actualización inmutable

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

El operador spread crea copias superficiales; para datos anidados copias cada nivel que cambies.

## Por qué la inmutabilidad trae más beneficios

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

## Herramientas que ayudan

```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 hace que las actualizaciones inmutables anidadas sean ergonómicas permitiéndote escribir código que parece mutar en un borrador que convierte a una actualización inmutable.

## Por qué es importante

La inmutabilidad es el mecanismo que hace que la detección de cambios basada en referencias funcione — es el *por qué* `[...items]` dispara un re-render pero `items.push()` no.

Más allá de la corrección, desbloquea optimizaciones de rendimiento (la memoización compara referencias) y características poderosas (deshacer/rehacer, viaje en el tiempo).

Entender los patrones de actualización inmutable (y herramientas como Immer) es esencial para trabajar correctamente con React/Redux; mutar el estado es uno de los errores más comunes de los principiantes.