Tengo un ejemplo de código como este ( demostración de codesandbox ):
const [array, setArray] = useState([]); const addElementToArray = () => { array.push(1); setArray([...array]); } return ( <div className="App"> <button onClick={addElementToArray}>addElementToArray</button> {array.map(el => <div>{el}</div>)} </div > );Aquí no uso la forma estándar de actualizar la matriz como
setArray([...array, 1]);¿Qué desventajas tiene la actualización de valores como en mi primer ejemplo?
En este ejemplo no notará ningún problema. Pero entonces, este es un ejemplo muy pequeño y artificial, ¿no?
Pero en una aplicación más grande con una lógica y una funcionalidad más complejas, esto puede conducir fácilmente a errores extraños y difíciles. ¿Por qué? Porque estás mutando directamente el estado:
array.push(1);¿Hay algo más que haga referencia a ese estado o lo observe de alguna manera? ¿Está ocurriendo esta mutación en medio de la representación de un componente, donde parte de la lógica ya ha respondido al estado premutado y la lógica restante responderá al estado posmutado? ¿Se están poniendo en cola varias actualizaciones de estado y ahora no sabemos cuáles verán qué versión de estado?
Eso es mucho de lo que tener que hacer un seguimiento. O puede evitar todos esos problemas potenciales simplemente no mutando el estado y siguiendo "la forma estándar" que ya conoce:
setArray([...array, 1]); o, si puede haber varias actualizaciones de estado y desea agregar el 1 a la más reciente:
setArray(a => [...a, 1]);Si usa esta línea sola,
array.push(1);el estado cambia pero React no es consciente del cambio, por lo que el componente no se volverá a procesar. En este caso, todo el propósito de React desaparece porque la interfaz de usuario no se corresponde con el cambio de estado, y eso lo convierte en una mala práctica.
Sin embargo, si usa esta línea sola:
setArray([...array, 1]);la interfaz de usuario corresponderá al cambio de estado, que es la forma correcta de usar React.
Y con respecto a esto:
array.push(1); setArray([...array]); básicamente te estás burlando de React porque .push() cambia el estado sin volver a renderizar.