Tome este ejemplo de estado:
const [state, setState] = useState({ x: 1, nested: { y: 2, z: 3 } });La versión inmutable de un controlador para incrementar el valor de y sería la siguiente:
function incrementY() { setState((state) => { return { ...state, nested: { ...state.nested, y: state.nested.y + 1 } }; }); }La próxima versión crea un nuevo objeto de estado, pero muta el objeto anidado:
function incrementY() { setState((state) => { state.nested.y += 1; return { ...state }; }); }Ambas versiones darán lugar a una nueva representación del componente. Ahora, supongamos que este componente representa un niño:
return ( <div onClick={() => incrementY()}> <Child nested={state.nested} /> </div> );Si entiendo correctamente, una nueva representación del componente principal siempre conducirá a una nueva representación del componente secundario (incluso cuando la referencia al objeto anidado permanece igual).
Soy consciente de que el estado inmutable puede ser útil cuando es necesario mantener el historial de estados (por ejemplo, para la funcionalidad CTRL + Z). Pero, ¿hay alguna razón específica para React que me esté perdiendo?
Si entiendo correctamente, una nueva representación del componente principal siempre conducirá a una nueva representación del componente secundario
De forma predeterminada, sí, pero el componente secundario puede usar React.memo (u otras técnicas para componentes de clase) para omitir el procesamiento si sus accesorios no han cambiado. Si muta el objeto anidado, luego pasa ese objeto al niño, verá al niño como si nada hubiera cambiado.
Entonces, si desea poder usar de manera confiable las herramientas de reaccionar para omitir el procesamiento, debe hacer que su estado sea inmutable en todos los niveles.