Considere el ejemplo:
const Child = () => { console.log("I did re-render!"); return null; }; const App = () => { const [_, setValue] = useState(); const fn = useCallback(() => { // do something }, []); return ( <div> <button onClick={() => setValue(Math.random)}>click</button> <Child fn={fn} /> </div> ); };
Con cada cambio de estado en la App
(haga clic en el botón), el componente useCallback
se vuelve a renderizar, incluso si el prop fn
pasado se envuelve con Child
. Sin embargo, si envuelvo Child
con React.memo
, comienza a funcionar correctamente; no se vuelve a procesar cuando el padre se vuelve a procesar.
Mi pregunta: ¿Cuál es el punto de usar useCallbacks
sin React.memo
? ¿Debería usar siempre React.memo
si no quiero que el componente se vuelva a renderizar siempre si su padre se vuelve a renderizar?
¿Debería useCallbacks
siempre con React.memo
? Porque parece que no tienen sentido ni sirven sin React.memo
.