Impulsar el rendimiento de React: useCallback frente a useMemo Hooks

Los ganchos useCallback y useMemo de React son cruciales para optimizar el rendimiento de sus aplicaciones. Comprender cuándo y cómo usarlos puede evitarle renderizaciones innecesarias y garantizar que su aplicación funcione sin problemas. En este artículo, profundizaremos en ejemplos del mundo real sobre el uso eficaz de useCallback y useMemo.

Cuándo utilizar useCallback

El gancho useCallback devuelve una versión memorizada de la función de devolución de llamada, lo que significa que solo recrea la función si una de sus dependencias cambia. Esto es particularmente útil cuando se pasan funciones como accesorios a componentes secundarios para evitar que se vuelvan a representar innecesariamente.

Ejemplo en tiempo real: evitar renderizaciones innecesarias

Supongamos que tiene un componente principal que pasa una función a un componente secundario. Sin useCallback, el componente secundario se volvería a representar cada vez que se renderice el componente principal, incluso si la lógica de la función no ha cambiado.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

      
Count: {count}
      
  );
};

export default ParentComponent;

En el ejemplo anterior, handleIncrement se memoriza con useCallback. ChildComponent solo se volverá a representar cuando cambie el recuento, lo que evitará reproducciones innecesarias y mejorará el rendimiento.

Cuándo utilizar useMemo

El gancho useMemo se usa para memorizar el resultado de una función, recalculando el resultado almacenado en caché solo cuando una de sus dependencias cambia. Es útil para optimizar el rendimiento en situaciones en las que una función realiza un cálculo costoso.

Ejemplo en tiempo real: optimización de cálculos costosos

Supongamos que tiene un componente que realiza una operación computacionalmente costosa, como filtrar una lista grande.

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
  );
};

export default ExpensiveComponent;

En este ejemplo, useMemo se usa para almacenar en caché el resultado del filtrado de la matriz de elementos. De esta manera, la costosa operación de filtrado solo se recalcula cuando cambian los elementos o el filtro, evitando cálculos innecesarios.

Directrices para utilizar useCallback y useMemo

• Utilice useCallback al pasar funciones a componentes secundarios para evitar renderizaciones innecesarias.
• Utilice useMemo para cálculos costosos que no necesitan volver a calcularse en cada renderizado.
• Evite usarlos en exceso. La memorización agrega complejidad y, a veces, puede hacer que el código sea más difícil de leer. Úsalos únicamente cuando identifiques un problema de rendimiento.
• Recuerde la matriz de dependencias. Especifique siempre las dependencias con precisión; de lo contrario, podrías encontrarte con errores o comportamientos inesperados.

Conclusión

Los ganchos useCallback y useMemo de React son herramientas poderosas para optimizar el rendimiento de los componentes evitando rerenderizaciones innecesarias y cálculos costosos. Al aplicar estos ganchos con cuidado, puedes asegurarte de que tu aplicación React se ejecute de manera eficiente.