Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

03D

20H

24M

44S

3

useMemo&useCallback[ES]

useMemo

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

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],
);

Diferencias entre ambas

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

Escribe tu comentario
+ 2