const memoizedValue = useMemo(() => { // factory function }, [obj]); Imagine obj tiene varios accesorios anidados.
En este ejemplo con gancho useMemo:
obj ?o
obj y luego vuelve a calcular el valor si alguna propiedad ha cambiado , independientemente de su referencia.¿React volverá a calcular el valor dado por la función de fábrica si cambia la referencia a obj?
Por lo que sé y entiendo, React utiliza controles de igualdad de referencia superficiales.
Considere el siguiente código:
function App() { const [c, setC] = React.useState(0); const [obj, setObj] = React.useState({ prop: 10 }); const forceRender = () => setC((c) => c + 1); const memoizedValue1 = React.useMemo(() => { console.log("`obj` dependency updated, recomputing value."); return obj.prop; }, [obj]); const memoizedValue2 = React.useMemo(() => { console.log("`obj.prop` dependency updated, recomputing value."); return obj.prop; }, [obj.prop]); const immutableHandler = () => { setObj(() => { console.log("Immutable update returns new object."); return { prop: 42 }; }); forceRender(); }; const mutableHandler = () => { setObj((obj) => { console.log("Mutable update returns same object with updated property."); obj.prop = 13; // DON'T DO THIS IN REAL CODE, IT'S A MUTATION!! return obj; }); forceRender(); }; return ( <div className="App"> <div>memoizedValue1: {memoizedValue1} - memoizedValue2: {memoizedValue2}</div> <button type="button" onClick={immutableHandler}> Immutable Update </button> <button type="button" onClick={mutableHandler}> Mutable Update </button> <button type="button" onClick={() => setObj({ prop: 10 })}> Reset </button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, rootElement ); <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> <div id="root" /> memoizedValue1 utiliza el valor del objeto obj raíz como dependencia, mientras que memoizedValue2 utiliza el valor del objeto obj.prop anidado como dependencia. Un botón actualiza y devuelve una referencia de objeto obj completamente nueva, mientras que el otro solo actualiza la referencia de valor obj.prop . Cuando se reemplaza todo el objeto y es una nueva referencia, observe que se invocan ambas devoluciones de llamada de gancho useMemo , pero cuando solo se actualiza el valor prop anidado, solo se invoca la segunda devolución de llamada de gancho useMemo .
React no analiza más a fondo las propiedades anidadas al comparar las dependencias de ganchos de React.