inmutabilidad
Nunca mutes el estado directamente
React detecta cambios comparando referencias, no valores internos. Si mutas un array u objeto directamente, la referencia sigue siendo la misma y React no sabe que algo cambió — el componente no se re-renderiza.
El problema
Operaciones como array.push(), array.splice() o obj.propiedad = valor modifican el objeto original en memoria. Como la referencia no cambia, React asume que el estado es idéntico al anterior y omite el re-render. El bug es silencioso: la lógica se ejecuta, pero la UI no se actualiza.
La solución
Siempre crea una nueva referencia al actualizar estado. Para arrays usa el spread [...arr, nuevoItem], arr.filter() o arr.map() — todos retornan un nuevo array. Para objetos usa { ...obj, campo: valor }. Para estructuras anidadas, copia en cada nivel que cambia.
Tropiezos comunes
- 01array.push(), array.pop(), array.splice() y array.sort() mutan el array original — nunca los uses directamente sobre estado.
- 02Para objetos anidados debes copiar en cada nivel: { ...obj, nested: { ...obj.nested, campo: valor } }. Considera Immer si la estructura es muy profunda.
- 03structuredClone() hace una copia profunda pero es costoso — úsalo solo cuando necesitas clonar un objeto complejo que no puedes copiar nivel por nivel.