useMemo y useCallback son dos poderosos enlaces de React que desempeñan un papel crucial para evitar re-renderizaciones innecesarias que resultan en la optimización del rendimiento de los componentes. Son herramientas esenciales para que los desarrolladores creen aplicaciones React eficientes y con capacidad de respuesta.

En esta guía profundizaremos en la explicación de useMemo y useCallback, cuáles son sus similitudes y en qué se diferencian entre sí. Entenderemos cómo implementarlos, cuándo usar cada uno.

¿Por qué deberías usar useMemo o useCallback?

Por lo general, en React la mayoría de los cálculos son rápidos, pero a veces tienes un cálculo en una matriz muy grande o algún cálculo costoso que no es necesario ejecutar en cada repetición.

los ganchos useMemo y useCallback pueden ayudar a resolver este problema al almacenar en caché esos costosos cálculos entre re-renderizaciones.

¿Qué es useMemo y cómo usarlo?

useMemo es un gancho de React que almacena en caché el resultado de un cálculo entre renderizaciones y requiere dos argumentos:

• CalculatedValue: la función que calcula el valor que desea almacenar en caché. La función no debe aceptar ningún parámetro y debe ser pura y devolver cualquier tipo de valor. React devolverá el mismo resultado calculado si las dependencias no han cambiado; de lo contrario, calculará un nuevo resultado y lo almacenará en caché.
• dependencias: la lista de todas las referencias de valores reactivos que están dentro de su CalculatedValue, desde variables de estado, constantes y llamadas a funciones. React intentará comparar cada valor reactivo con su valor anterior usando la comparación Object.it.

usarUso de notas

Para almacenar en caché un cálculo entre renderizaciones, envuélvalo en un gancho useMemo en el nivel superior del componente.

useMemo(fn, dependencias)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

Observe que el primer parámetro de useMemo es una función sin parámetros.

La primera vez que React calculará el valor del resultado del primer parámetro de useMemo, luego memorizará el segundo parámetro, que es la lista de dependencias. React almacenará en caché el resultado calculado entre renderizaciones y solo volverá a calcular el resultado cuando cambie uno de los valores de dependencia.

¿Qué es useCallback y cómo usarlo?

el gancho useCallback es el mismo que el gancho useMemo con la única diferencia de que este gancho almacenará en caché la función (primer parámetro para useCallback) sin calcular el valor. Además, la función puede aceptar parámetros a diferencia de useMemo.

Para usar useCallback necesitas pasar parámetros:

• Una definición de función que debe almacenarse en caché.
• Lista de dependencias

const cachedFn = useCallback(fn, dependencias)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

Cuándo usar useMemo en lugar de useCallback

Si lo que más le preocupa es optimizar el resultado del cálculo, utilice useMemo.
Si lo que más le preocupa es evitar repeticiones innecesarias debido a cambios de funciones, utilice useCallback.

Saltar renderizaciones de un componente

A veces tendrá un componente principal que deberá volver a renderizarse, lo que también dará como resultado la nueva renderización del componente secundario. Es posible almacenar en caché un componente usando memo.

Supongamos que tenemos un componente Todolist con estado de tema y un componente Lista como hijo. Siempre que el estado del tema cambia, el componente de lista se vuelve a renderizar, lo cual no es necesario. para resolver este problema utilice memo.

envolvemos el componente funcional de List con memo.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Conclusión

En esta guía completa, comprendemos los ganchos useMemo y useCallback, cómo usar cada uno de ellos, cuándo usarlos y explicamos sus beneficios para optimizar el rendimiento de la aplicación React.