useMemo usado para memorizar resultado de funciones complejas o largas, este tiene como argumento una funcion que realiza el calculo y aparte un array de referentes donde alojara resultados calculados. Por lo que si llegan nuevos valores estos al noser iguales a los valores de los referentes, se ejecutara la funcion. De otro modo, se guardara el resultado y se emitira directamente este en vez de calcular otra ver.
link1, link2 –> mas accerca de useMemo
const memoizedValue = useMemo (() => computeExpensiveValue (a, b), [a, b]);
React recomienda utilizar el gancho para optimizar el rendimiento debido a que esto libera espacio en ciertos períodos.
UseCallback se emplea para memoizar una funcion. Un ejemplo tipico es un componente padre y sus hijos, el padre llama una API y los hijos son los item de la lista y cada hijo tiene una funcion (para aniadirlos a favorito por ejemplo), aparte hay un input para buscar en la list. Ahora cada vez que se escriba en el input el componente se re-renderiza y la funcion de agregar a favoritos tambien lo hace. Para evitar eso se coloca un useCallback que permitira la inicializacion de la funcion si los referentes cambian. No se recomienda el uso excesivo de callbacks.
link1, link2 --> accerca de useCallback
const memoizedCallback = useCallback (
() => {
hacer algo (a, b);
},
[a, b],
);
La diferencia esta en que useCallback retornara una funcion en cada render del componente en base a las referencias asignadas. En cambio, useMemo retornara un valor en cada render del componente en base a las referencias asignadas. useMemo&useCallback