En React, ¿cómo debes actualizar un array guardado en el estado?
const [items, setItems] = useState(["a", "b"]);
function add() {
// option A
items.push("c");
setItems(items);
// option B
setItems([...items, "c"]);
}Opciones
- Option B: crear un array nuevo, para que React vea un cambio (Opción correcta)
- Option A: mutar el array y pasar el mismo
- Ambas opciones funcionan exactamente igual en React
- Ninguna opción funciona en React con arrays en el estado
Respuesta
Option B: crear un array nuevo; React detecta una referencia nueva y vuelve a renderizar
Por qué
React decide volver a renderizar comparando el estado antiguo y el nuevo con ===. Si mutas el mismo array (push) y lo pasas de vuelta, la referencia es idéntica, así que React puede omitir la actualización.
Crea siempre un valor nuevo: [...items, x], items.filter(...), items.map(...); para objetos { ...user, name: "Ana" }.
Trata el estado como inmutable.
Recuerda
El estado es inmutable: copia, no mutes.