useMemo es una función de React Hooks que te permite memorizar el resultado de un cálculo y evitar recalcularlo si los argumentos no han cambiado. Esto es útil para mejorar el rendimiento de tu aplicación, especialmente en casos en los que un cálculo puede ser costoso o el componente depende de un gran número de valores.
La función useMemo toma dos argumentos: la primera es una función que realiza el cálculo y la segunda es una matriz de dependencias. La función se ejecutará sólo si alguna de las dependencias ha cambiado desde la última vez que se ejecutó.
Aquí hay un ejemplo de un componente de React que utiliza useMemo para mejorar el rendimiento de una función que devuelve una lista de números primos:
import { useMemo } from 'react';
function isPrime(num) {
for (let i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return num !== 1;
}
function getPrimes(count) {
const primes = [];
for (let i = 2; primes.length < count; i++) {
if (isPrime(i)) {
primes.push(i);
}
}
return primes;
}
function PrimeList({ count }) {
const primes = useMemo(() => getPrimes(count), [count]);
return (
<ul>
{primes.map((prime) => (
<li key={prime}>{prime}</li>
))}
</ul>
);
}
En este ejemplo, el componente PrimeList recibe una propiedad count y utiliza useMemo para memorizar el resultado de la función getPrimes(count). Esto significa que si count no ha cambiado, getPrimes no será llamada de nuevo y se devolverá el resultado memorizado.
useMemo es útil cuando se tiene un componente que realiza un gran número de cálculos costosos para actualizar un estado o una propiedad cada vez que se renderiza. Esto ayuda a mejorar el rendimiento de la aplicación al evitar hacer cálculos innecesarios.
useCallback es una función de React Hooks que es similar a useMemo, pero en lugar de memorizar el resultado de un cálculo, memoriza una función. La función devuelta por useCallback siempre será la misma mientras sus dependencias no cambien. Esto es útil para mejorar el rendimiento de tu aplicación cuando se utilizan funciones como controladores de eventos o funciones pasadas a componentes hijos.
La función useCallback toma dos argumentos: la primera es la función que se quiere memorizar y la segunda es una matriz de dependencias. La función se devolverá sólo si alguna de las dependencias ha cambiado desde la última vez que se devolvió.
Aquí hay un ejemplo de un componente de React que utiliza useCallback para mejorar el rendimiento de una lista de nombres:
import { useCallback } from 'react';
function NamesList({ names }) {
const handleClick = useCallback((name) => {
alert(`Hello, ${name}!`);
}, []);
return (
<ul>
{names.map((name) => (
<li key={name} onClick={() => handleClick(name)}>
{name}
</li>
))}
</ul>
);
}
En este ejemplo, el componente NamesList recibe una propiedad names y utiliza useCallback para memorizar la función handleClick. La función recibirá un argumento con el nombre y mostrará una alerta con ese nombre cuando sea llamada. Al pasar handleClick como un controlador de evento para cada uno de los elementos de la lista
, se garantiza que la función no sea re-creada cada vez que se renderiza el componente.
useCallback es útil cuando se tiene un componente que pasa funciones como propiedades a componentes hijos y se quiere asegurar de que estas funciones no son re-creadas cada vez que el componente principal se renderiza. Esto ayuda a mejorar el rendimiento de la aplicación al evitar recrear funciones innecesariamente.
https://www.w3schools.com/react/react_usememo.asp
https://www.w3schools.com/react/react_usecallback.asp
https://beta.reactjs.org/reference/react/useMemo
https://developero.io/blog/react-hook-usememo
https://beta.reactjs.org/reference/react/useCallback
https://latteandcode.medium.com/el-hook-usecallback-y-react-memo-87f761733c35