Cómo usar useCallback en React

En el desarrollo web moderno, la optimización del rendimiento es crucial, especialmente cuando trabajamos con bibliotecas como React, que manejan una gran cantidad de estados y renders.

En este artículo explicaré qué es useCallback en React. Exploraremos para qué sirve, cuándo usarlo, su incorporación en React, sus ventajas y desventajas, y veremos algunos casos de uso en aplicaciones comunes.

¿Qué es useCallback?

Para comenzar vamos a definir esta característica: useCallback es un hook de React que se utiliza para memorizar funciones. Esto permite evitar que se vuelvan a crear en cada renderizado del componente. React tiene un comportamiento que consiste en recrear funciones cada vez que un componente se renderiza, lo cual puede impactar el rendimiento, especialmente en componentes complejos o aquellos que dependen de muchas funciones.

Para comprenderlo, comencemos por aclarar dos aspectos fundamentales. En este caso el hook toma dos argumentos:

1. Una función a memorizar.
2. Una lista de dependencias que le indica cuándo debe actualizar la función memorizada.

Para comprenderlo mejor veamos un ejemplo de estructura de código con este Hook en acción. La sintaxis básica es la siguiente:

const memoizedCallback = useCallback(() => {
  // Código de la función
}, [dependencias]);

¿Para qué sirve useCallback?

El propósito principal de useCallback en Rect es evitar la recreación de funciones en cada renderizado, lo que puede evitar renders innecesarios de componentes hijos o la ejecución de efectos costosos.

Cuando pasamos una función como prop a un componente hijo, si la función se crea de nuevo en cada renderizado, el componente hijo también se re-renderiza, aunque no haya cambios en sus props. Con useCallback, podemos asegurarnos de que la referencia a esa función se mantenga igual a menos que cambien las dependencias, reduciendo así renders innecesarios.

Como siempre explico en mis capacitaciones, la eficiencia es clave en todos los desarrollos. En particular, cuando trabajamos con React debemos estar atentos al render y las veces que se vuelve a «dibujar» la interfaz, ya que eso puede repertutir tanto en rendimiento como en la experiencia del usuario.

¿Cuándo usar useCallback?

A la hora de pensar en que circunstancias utilizar este Hook hay algunos aspectos fundamentales que debemos evaluar. Por lo tanto, debemos considerar usar useCallback en las siguientes situaciones:

1. Optimización de renderizados: si contamos con un componente que se renderiza frecuentemente y que recibe funciones como props, usar useCallback puede evitar que el componente hijo se re-renderice innecesariamente. Aquí tenemos la primera clave a considerar.
2. Funciones pasadas a componentes hijos: si necesitamos pasar funciones a componentes hijos que dependen de valores específicos (como un estado), podría resultar una buena opción emplear useCallback para asegurarnos de que solo se actualicen cuando esas dependencias cambien.
3. Efectos costosos: si tienes funciones que realizan tareas intensivas (como cálculos o consultas a APIs, por citar algunos ejemplos), useCallback puede evitar que esas funciones se vuelvan a crear y ejecuten en cada render sin necesidad.

¿Por qué y cuándo se incorporó useCallback?

useCallback fue introducido en React a partir de la versión 16.8, junto con otros hooks como useState, useEffect, y useMemo. Su incorporación fue motivada por la necesidad de una mejor gestión del estado y el ciclo de vida de los componentes funcionales, ofreciendo más herramientas para mejorar el rendimiento de las aplicaciones de React sin necesidad de escribir componentes de clase.

Ventajas de useCallback

A continuación veremos algunas de las principales ventajas de emplear este Hook en nuestros proyectos:

• Optimización de rendimiento: como explicaba anteriormente, useCallback puede evitar renderizados innecesarios de componentes hijos y efectos costosos, mejorando el rendimiento de la aplicación.
• Mejora en la consistencia: mantiene la referencia a la función constante, lo que puede evitar comportamientos inesperados en componentes que dependen de funciones como props.
• Fácil de implementar: su implementación es sencilla y directa, lo que lo convierte en una herramienta accesible para la mayoría de los desarrolladores.

Desventajas de useCallback

Los siguientes son algunos aspectos que debemos considerar a la hora de pensar en implementar esta característica. Algunas de las situaciones donde puede no ser aconsejable trabajar con este Hook son las siguientes:

• Sobrecarga cognitiva: es importante considerar que en algunos casos, abusar de useCallback puede aumentar la complejidad del código, dificultando su lectura y mantenimiento.
• Costo de la memorización: si bien useCallback puede optimizar el rendimiento, la memorización de las funciones tiene un costo de procesamiento en sí mismo. Usarlo innecesariamente puede terminar afectando el rendimiento en lugar de mejorarlo. Siempre explico en mis consultorías que toda optimización requiere análisis específicos para cada proyecto, especialmente en las empresas.
• Rendimiento en aplicaciones simples: en aplicaciones pequeñas o con pocos renderizados, el uso de useCallback puede no tener un impacto significativo, por lo que podría considerarse innecesario. Conectado con lo anterior, la evaluación de las dimensiones y escalabilidad de un proyecto es clave a la hora de planificar la implementación

Casos de uso en aplicaciones comunes

1. Aplicaciones de listas:
   Si tienes una aplicación que maneja grandes listas de elementos y pasas funciones como callbacks a elementos hijos, useCallback puede ayudar a evitar que toda la lista se re-renderice innecesariamente.

   const handleClick = useCallback((id) => {
     console.log(id);
   }, []);

   return (
     <ul>
       {items.map(item => (
         <ListItem key={item.id} onClick={() => handleClick(item.id)} />
       ))}
     </ul>
   );

En este caso, handleClick solo se crea una vez, lo que evita re-renderizados innecesarios de los elementos de la lista.

2. Botones de acción:
   En aplicaciones donde se tienen múltiples botones que ejecutan acciones específicas, puedes usar useCallback para memorizar las funciones que manejan esos eventos y evitar que los botones se re-rendericen innecesariamente.

   const increment = useCallback(() => {
     setCount(count + 1);
   }, [count]);

   return <button onClick={increment}>Increment</button>;

En el ejemplo anterior la función increment se actualiza solo cuando cambia count, evitando recreaciones innecesarias de la función en cada renderizado.

3. Formulario de búsqueda con debounce:
   En una aplicación de búsqueda, puede ser útil usar useCallback para memorizar la función que realiza la búsqueda, especialmente si se utiliza un debounce o throttle para optimizar la experiencia del usuario.

   const handleSearch = useCallback(debounce((query) => {
     // Realizar la búsqueda
   }, 500), []);

   return <input onChange={(e) => handleSearch(e.target.value)} />;

En el ejemplo de código anterior, la función handleSearch no se recrea en cada render, evitando que se dispare la búsqueda más veces de las necesarias.

En conclusión

Como hemos podido apreciar en este artículo, useCallback es una herramienta valiosa en React. Ayuda a mejorar el rendimiento de las aplicaciones, evitando renderizados innecesarios y la recreación constante de funciones.

Sin embargo, como toda herramienta, debe usarse con criterio, evaluando el costo-beneficio de su implementación. En aplicaciones complejas, donde las funciones se pasan frecuentemente como props o hay cálculos costosos, useCallback puede marcar una gran diferencia en la optimización. Pero en aplicaciones más simples, su uso puede ser innecesario y añadir complejidad.

Espero que esta guía te haya ayudado a entender mejor cuándo y cómo utilizar useCallback en tus proyectos de React.

Para conocer más sobre este Hook podemos leer la guía de referencia oficial de React.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.