¿Sabes qué es y cuál es la importancia de useCallback en React? useCallback es uno de los hooks de React que nos permiten crear elementos que mantienen sus referencias a lo largo de los renders de un componente de tipo función. Este hook, en compañía del useMemo, se usa mucho menos que useEffect, useState o useRef.
Sin embargo, conocer su funcionamiento es igual de importante. Por ello, en este post, te enseñaremos cuál es la importancia de useCallback en React, un hook que nos devuelve funciones memoizadas.
¿Cuál es la importancia de useCallback en React?
El hook useCallback en React es muy útil cuando debemos limitar el número de veces en las que se crea una función a lo largo del estado de vida de un componente. Como te hemos explicado en nuestro post sobre referencias en React, cada vez que React pasa por un render, vuelve a crear los objetos que renderiza, tengan o no el mismo contenido de los objetos del render anterior. Esto puede afectar nuestro performance, no solo al renderizar el componente que llame la función, sino también cuando otros hooks la llamen.
Te ponemos un ejemplo de la importancia de useCallback en React. Supongamos que tenemos una función handleSubmit que tiene una variedad de variables que llaman a funciones y métodos:
const handleSubmit = async event => {
event.preventDefault ( );
try {
resetError ( );
setIsLoading (true);
await login (credentials);
setIsLoading (false);
onLogin ( );
const from = location.state ?. form?. pathname || ‘/’;
navigate (from, {replace:true});
} catch (error) {
setError (error);
setIsLoading (false);
}
};
Ahora, supongamos que, sea por la razón que sea, esta función es una dependencia de un hook useEffect:
useEffect (( ) => {
handleSubmit ( )
}, [handleSubmit])
¿Qué pasa si ponemos en un array de dependencias en React una función que se crea todo el tiempo? Pues que, como la función se crea en cada render, el efecto se ejecutará en cada render. Esto sucede sin importar si el contenido de la función cambia, pues basta con que haya un nuevo render para que React cree una referencia. El efecto, por tanto, llega a descontrolarse, pues daría igual no tener una dependencia o tener una que cambia todo el tiempo.
La importancia de useCallback en React es mantener el control de una función que no cambia y de todos los elementos que la llaman. Esto nos permite limitar la creación infinita e innecesaria de elementos, mejorando el rendimiento de nuestra aplicación.
¿Qué sigue?
Ahora que conoces cuál es la importancia de useCallback en React, te invitamos a seguir aprendiendo sobre los elementos de esta y otras herramientas de programación para la web en nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva ideal para aprender sobre JavaScript, HTML, CSS, React y mucho más. ¿Quieres impulsar tu carrera? ¡Inscríbete ya!
