0
322
Vistas¿Cuál es la diferencia entre [...arr, addThisElement] y arr.push(addThisElement) cuando se usa useState en ReactJS?
¿Podría alguien explicar la diferencia entre esto?
const arr = users; arr.push({ firstName, email }) setUsers((prevState) => arr)y esto:
setUsers(prevState => [...prevState, { firstName, email }])2 Respuestas
Responde la pregunta0
La respuesta es referencias e igualdad de objetos...
Array.prototype.push() muta la matriz en su lugar, lo que significa que su referencia de objeto no cambia.
const prevState = [1,2,3]; const nextState = prevState; nextState.push(4); nextState === prevState; // true [...prevState, { firstName, email }] crea una nueva matriz que no es igual a prevState .
const prevState = [1,2,3]; const nextState = [...prevState, 4]; nextState === prevState; // falseSegún las reglas de detección de cambio de estado de React...
Si devuelves el mismo valor de un gancho reductor que el estado actual, React se recuperará sin renderizar a los niños ni disparar efectos. (React usa el algoritmo de comparación
Object.is).
El uso .push() y la actualización del estado al mismo valor significa que React se salvará de la nueva representación y no verá los cambios realizados.
users.push({ firstName: "Bob", email: "bob@example.com" }); setUsers(users); 
Cree una nueva matriz y los cambios se hacen visibles.
setUsers((prev) => [ ...prev, { firstName: "Bob", email: "bob@example.com" } ]);
0
En el primer caso, muta la referencia arr agregando un usuario. En el segundo caso, crea una matriz completamente nueva copiando todos los datos de la anterior y agregando el nuevo usuario.
Debe usar el segundo caso ya que react compara el estado usando Object.is , que en el caso de su primer caso devolvería true ya que la referencia no ha cambiado incluso si se agrega un nuevo usuario y, por lo tanto, la interfaz de usuario no se actualizará.