React
Explica cómo actualizar objetos y arrays en el estado sin mutarlos, usando spread, map, filter e Immer para conservar referencias y cambios predecibles.
React usa referencias para detectar cambios y mantener snapshots coherentes. Mutar un objeto existente modifica también el valor visto por renders anteriores.
user.name = "Laura";
setUser(user); // misma referenciasetUser((current) => ({
...current,
name: "Laura",
}));Para datos anidados debes copiar cada nivel modificado.
setUser((current) => ({
...current,
address: {
...current.address,
city: "Bogotá",
},
}));Agregar:
setItems((current) => [...current, newItem]);Eliminar:
setItems((current) => current.filter((item) => item.id !== id));Actualizar:
setItems((current) =>
current.map((item) =>
item.id === updated.id ? updated : item,
),
);Evita push, pop, splice, sort y reverse directamente sobre estado. Puedes copiar antes:
const sorted = [...items].sort(compareProducts);Para estructuras complejas, Immer puede ofrecer sintaxis de mutación produciendo copias inmutables, pero no reemplaza comprender referencias.
Una actualización de estado debe producir una nueva referencia para cada parte que cambió y conservar las referencias de lo que no cambió.
Un objeto guardado en state no se vuelve especial. Sigue siendo una referencia de JavaScript. React espera que cada render trate el snapshot recibido como inmutable.
render A → user referencia 1
actualización → user referencia 2
render B → nuevo snapshotSi mutas la referencia 1, también cambias retroactivamente el valor que otros lugares podrían observar. Además, reenviar la misma referencia no comunica claramente que existe un valor nuevo.
El spread copia únicamente un nivel:
const nextUser = { ...user };
nextUser.address.city = "Bogotá";nextUser.address y user.address siguen apuntando al mismo objeto. Debes copiar cada nivel modificado:
setUser((current) => ({
...current,
address: {
...current.address,
city: "Bogotá",
},
}));No necesitas copiar ramas que no cambian. Conservar sus referencias permite compartir estructura y facilita comparaciones.
setItems((current) => [
...current.slice(0, index),
newItem,
...current.slice(index),
]);setTasks((current) =>
current.map((task) =>
task.id === taskId
? { ...task, completed: !task.completed }
: task,
),
);sort() muta. Usa una copia o toSorted:
const sorted = items.toSorted((a, b) => a.name.localeCompare(b.name));const sorted = [...items].sort(compareItems);const reversed = items.toReversed();O copia antes de reverse().
Actualizar una fila no significa recrear todas sus entidades:
setProducts((current) =>
current.map((product) =>
product.id === updated.id
? { ...product, ...updated }
: product,
),
);Los productos sin cambios conservan referencia. Esto puede ayudar a componentes memoizados y selectores, pero el objetivo principal es representar correctamente qué cambió.
Una estructura profundamente anidada puede volver costosas y confusas las actualizaciones:
type State = {
productsById: Record<string, Product>;
productIds: string[];
};La normalización ayuda cuando:
No normalices por costumbre una estructura pequeña y local.
Immer permite escribir una receta aparentemente mutable:
setState(
produce((draft) => {
draft.orders[orderId].status = "paid";
}),
);Internamente genera una siguiente estructura inmutable y conserva ramas no modificadas. Ventajas:
Trade-offs:
Crear y modificar una estructura nueva durante el mismo cálculo es seguro:
const nextItems: Item[] = [];
for (const item of items) {
if (item.active) nextItems.push(item);
}No estás mutando state; estás construyendo un valor nuevo. La regla no es “nunca uses push”, sino “no modifiques snapshots compartidos”.
No copies todo automáticamente antes de llamar una librería. Primero revisa el contrato:
Cuando una API muta, pasa una copia adecuada o aísla la integración.
Crear objetos nuevos es normal en React. La inmutabilidad no significa clonar toda la aplicación en cada cambio; el structural sharing conserva ramas intactas.
Un clon profundo genérico:
structuredClone(state)puede ser innecesariamente costoso, perder tipos especiales según el caso y reemplazar referencias que no cambiaron. Actualiza solo el camino necesario.
Síntomas frecuentes:
memo no se comporta de forma predecible.Busca:
push, splice, sort, reverse sobre state.Si actualizar correctamente la estructura requiere múltiples ramas coordinadas, un reducer puede concentrar reglas:
function cartReducer(state: CartState, action: CartAction): CartState {
// transiciones puras
}El reducer no elimina la necesidad de inmutabilidad; la hace más local y comprobable.
{ ...user } no basta para modificar user.address.city?push?address conserva la referencia del objeto anterior.Lifting state y single source of truth explica dónde debe vivir cada dato para evitar copias desincronizadas.