El hook useMemo sirve para memoizar (es decir, recordar el resultado de una funcion que puede repetirse) con el objeto de poder reducir tiempo de calculo y mejorar el rendimiento de una aplicación. Es util cuando una misma funcion se repite varias veces de forma innecesaria.
Un ejemplo sencillo de cómo usar el hook useMemo en React es el siguiente:
Supongamos que tenemos una función costosa que calcula el factorial de un número:
function factorial(n) {
console.log('Calculando factorial de ', n);
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}
return result;
}
Si usamos esta función en un componente de React varias veces, cada vez que el componente se renderiza, la función se volverá a calcular, lo que puede ser costoso en términos de rendimiento. En lugar de esto, podemos utilizar useMemo para memoizar el resultado de la función:
import { useMemo } from 'react';
function MyComponent({ n }) {
const factorialMemoized = useMemo(() => factorial(n), [n]);
// Resto del componente
}
En este ejemplo, la variable factorialMemoized contendrá el resultado memoizado de la función factorial. La función se calculará la primera vez que se renderice el componente, pero en las siguientes ocasiones se usará el resultado memoizado, lo que ahorrará tiempo de cálculo y mejorará el rendimiento de la aplicación.
Es importante tener en cuenta que el segundo argumento de useMemo (en este caso, [n]) es un array de dependencias que le indica a React cuándo debe volver a calcular el valor memoizado. En este ejemplo, la dependencia es n, por lo que el valor memoizado se volverá a calcular cuando n cambie.