Según tengo entendido, React.memo es una API que memoriza un componente: si sus accesorios no cambian, reacciona usa el último renderizado de ese componente sin compararlo con su versión anterior. Omitir esta comparación acelera la aplicación. Enfriar.
Ahora, esto es lo que no entiendo: si los accesorios no cambian, tampoco se vuelve a renderizar un componente no memorizado , como puedo ver en ese código simple : no hay diferencia en la cantidad de renderizados entre un componente normal +useCallback y uno memorizado+useCallback. Básicamente, useCallbacks es todo lo que necesito, ya que un componente normal no se vuelve a renderizar con los mismos accesorios. Entonces, ¿qué me estoy perdiendo? Cuando memo entra en ayuda para optimizar?
import { useCallback, useEffect, useState, memo, useRef } from "react"; import "./styles.css"; function Child({ fn, txt }) { const [state, setState] = useState(0); console.log(txt + " rendered!"); useEffect(() => { setState((state) => state + 1); }, [fn]); return ( <div style={{ border: "solid" }}> I'm a Child {!fn && <div>And I got no prop</div>} {fn && <div>And I got a fn as a prop</div>} <div>and I've got rendered {state} times</div> </div> ); } const MemoChild = memo(({ fn, txt }) => { const [state, setState] = useState(0); const counter = useRef(0); console.log(txt + " rendered!", counter.current); useEffect(() => { setState((state) => state + 1); counter.current++; }, [fn]); return ( <div style={{ border: "solid" }}> I'm a Child {!fn && <div>And I got no prop</div>} {fn && <div>And I got a fn as a prop</div>} <div>and I've got rendered {state} times</div> </div> ); }); export default function App() { const [, setState] = useState(true); const handlerOfWhoKnows = () => {}; return ( <div className="App"> I'm the parent <br /> <button onClick={() => setState((state) => !state)}> Change parent state </button> <h3>Ref</h3> ref: <Child txt="ref" fn={handlerOfWhoKnows} /> <h3>useCallback test</h3> useCB: <Child txt="useCb" fn={useCallback(handlerOfWhoKnows, [])} /> memo: <Child txt="memo" fn={handlerOfWhoKnows} /> memo + useCB:{" "} <MemoChild txt="memo+useCb" fn={useCallback(handlerOfWhoKnows, [])} /> </div> ); }Su ejemplo lo está engañando un poco porque nunca cambia el estado de la App .
Ahora, esto es lo que no entiendo: si los accesorios no cambian, tampoco se vuelve a renderizar un componente no memorizado...
Eso es incorrecto. Si el padre vuelve a renderizar, un hijo no memorizado se volverá a renderizar, incluso si sus accesorios no cambian.
Cuando memo entra en ayuda para optimizar?
Cuando no quieres que eso suceda. :-)
Aquí hay un ejemplo, observe que Unmemoized se vuelve a renderizar a medida que sube el contador, pero Memoized no; ninguno de ellos usa el contador, por lo que ninguno de ellos necesita volver a renderizar, pero el no memorizado lo hace de todos modos porque ese es el comportamiento predeterminado:
const { useState, useEffect } = React; const Unmemoized = ({ value }) => { console.log(`Unmemoized rendering with "${value}"`); return <div>Unmemoized: {value}</div>; }; const Memoized = React.memo(({ value }) => { console.log(`Memoized rendering with "${value}"`); return <div>Memoized: {value}</div>; }); const Example = () => { const [counter, setCounter] = useState(0); useEffect(() => { const timer = setInterval(() => { setCounter(c => { ++c; if (c === 5) { clearInterval(timer); } return c; }); }, 800); return () => { clearInterval(timer); }; }, []); return ( <div> <div>Counter: {counter}</div> <Memoized value="a" /> <Unmemoized value="b" /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>