React es una librería JavaScript que recientemente ha desarrollado el concepto de hooks. Estos son una serie de funciones que nos permiten ejecutar diversas acciones. Mientras que unas reemplazan a los métodos de ciclo de vida, otras se enfocan en memoizar valores y funciones.
En este post, te enseñaremos qué es y cómo funciona el hook useCallback en React, una función que nos permite modificar la lógica de render de esta librería.
¿Qué es el useCallback en React?
useCallback en React es uno de los hooks de esta librería de JavaScript. Aunque menos usado que otros, como useState, useEffect y useRef, este hook también puede ser muy útil en nuestros proyectos React.
Para conocer más sobre el uso de los distintos hooks de React, te invitamos a leer nuestro post introducing hooks en reactjs.org.
El hook useCallback en React tiene un uso muy similar al hook useMemo, pues ambos se enfocan en memoizar ciertos elementos en React. La diferencia aquí es que, mientras useMemo devuelve un valor memoizado, el hook useCallback devuelve una función memoizada.
¿Qué significa memoizar?
En nuestro post sobre referencias en React te hemos explicado que, a la hora de crear y comparar objetos o funciones, React no compara su contenido ni tipo, sino su referencia. Es decir, la dirección a la que apunta en la memoria RAM. Esto hace que, aunque { } === { } parezca devolver true, realmente devuelve false porque, aunque son el mismo tipo de objeto, no son realmente el mismo objeto, pues no apuntan a la misma referencia.
Otra forma de entender las referencias en React es pensar en billetes. De este modo, aunque dos billetes de 100 euros tienen el mismo valor, no son el mismo objeto.
Siguiendo esta lógica, cuando tenemos un componente con una función dentro, cada vez que se ejecute un nuevo render de dicho componente se creará una nueva función. Entonces, a pesar de que la función ejecute la misma acción en cada render, React estará produciendo una nueva referencia y una nueva función.
¿A qué viene todo esto? Pues a que el hook useCallback puede hacer que este proceso cambie. Es decir, permite hacer que la referencia de una función se mantenga, logrando que la función sea siempre la misma. A continuación, te enseñamos cómo funciona esto.
¿Cómo funciona el hook useCallback en React?
Supongamos que tenemos la siguiente función que nos permite controlar el cambio de estado dentro de un componente LoginPage:
const handleChange = event => {
setCredentials (credentials => ({
…credentials,
[event.target.name]:
event.target.type === ‘checkbox’
? event.target.checked
: event.target.value,
}));
};
Ahora, supongamos que queremos hacer que esta función mantenga su referencia a través de los distintos renders del componente LoginPage, sea por la razón que sea. Entonces, podemos envolver la función deseada en el hook useCallback:
const handleChange = useCallback (event => {
setCredentials (credentials => ({
…credentials,
[event.target.name]:
event.target.type === ‘checkbox’
? event.target.checked
: event.target.value,
}));
});
Con el cambio anterior, tan simple como parece, hemos definido que nuestra función es memoizada. Sin embargo, todavía nos falta un paso para ejecutar el hook useCallback en React: pasarle un array de dependencias. Es decir, un array, vacío o no, como segundo parámetro.
const handleChange = useCallback (event => {
setCredentials (credentials => ({
…credentials,
[event.target.name]:
event.target.type === ‘checkbox’
? event.target.checked
: event.taget.value,
}));
}, [ ]);
Mientras que en el useEffect un array de dependencias quiere decir que el efecto solo se ejecutará después del primer render, en el useCallback este array quiere decir que la función metida dentro del hook se va a generar justo después del primer render y nunca volverá a cambiar su referencia, pasen los renders que pasen.
El significado del array de dependencias cambia según el hook en el que se introduce. Además, cambia si es un array vacío o un array con un valor dentro. Para conocer más sobre este elemento, te invitamos a leer nuestro post sobre array de dependencias en React.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona el hook useCallback en React, seguro que quieres seguir aprendiendo sobre las posibilidades que esta y otras herramientas de programación para la web tienen para ti. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra donde aprenderás con la guía de expertos a dominar lenguajes y herramientas que catapultarán tu camino en el sector IT. ¿Quieres cambiar tu vida? ¡Entra ahora y pide más información!
