Importancia de useCallback en React

Autor: | Última modificación: 10 de octubre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!