Sí, también debe aplicar este concepto al actualizar su estado en React. Si no lo hace, puede tener problemas con los componentes que no se vuelven a renderizar cuando actualiza su estado. Normalmente, React volverá a renderizar su componente cuando cambie su estado, en ambos ejemplos está haciendo esto, ya que está creando una nueva referencia de objeto en el nivel superior que hará que React vuelva a renderizar su componente y cualquiera de sus hijos. componentes (es decir: los componentes secundarios también se vuelven a renderizar cuando el componente principal se vuelve a renderizar). Sin embargo, hay una excepción a esto. Si ha memorizado un componente para ayudar con la eficiencia usando React.memo() , su componente secundario memorizado solo se actualizará cuando cambien los accesorios que ha pasado. Si está pasando a un componente secundario un objeto que está anidado dentro de su estado original, React no volverá a procesar ese componente a menos que la referencia del objeto haya cambiado. Esto podría generar problemas si sus componentes secundarios memorizados intentan usar el estado de su componente principal.

Por ejemplo:

 const { useState, memo } = React; const App = () => { const [state, setState] = useState({ x: { y: { z: 0 } } }); const changeStateBad = () => { // Your first technique (can cause issues) const newState = {...state}; newState.xyz += 1; setState(newState); } const changeStateGood = () => { // Your second technique for updating at all levels (just rewritten slightly) const newState = { ...state, x: { ...state.x, y: { ...state.xy, z: state.xyz + 1 } } }; setState(newState); } return <div> <NumberDisplay x={state.x} /> <br /> <button onClick={changeStateGood}>Good update</button> <br /> <button onClick={changeStateBad}>Bad update</button> </div> } // A memoized component that only rerenders when its props update const NumberDisplay = memo(({x}) => { return <h1>{xyz}</h1>; }); ReactDOM.render(<App />, document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

Los tipos de datos en JS se pueden dividir en tipos de datos primitivos (por ejemplo, string , number ) y tipos de datos no primitivos (por ejemplo, object ),

los tipos de datos primitivos no se pueden modificar (p. ej., usar String.prototype.replace siempre devolverá una nueva instancia de una cadena), mientras que los tipos de datos no primitivos sí, y la referencia que apunta a esos datos también se "actualizará" (eso es una gran simplificación, pero ejecutar, por ejemplo, xy = 2 no creará una nueva instancia de x ; en cambio, la x se mantendrá igual en cada lugar al que se hace referencia),

lo que significa que para detectar un cambio en la nueva versión del estado (de la manera más eficiente) se requiere crear una nueva instancia de un Object , una Array (y otras representaciones de tipos de datos no primitivos)

 // changing reference in top level const newState = { ...oldState } // changing nested reference const newState = { ...oldState, x: { ...oldState.x, y: 2 // new "y" value } } // changing nested reference, another example const newState = { ...oldState, x: { ...oldState.x, y: { ...oldState.xy, z: 'test' // new "z" value } } }

puede leer más sobre cómo se detecta el cambio en un nivel básico aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#comparing_objects