useMemo en React

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

React es una librería JavaScript que nos permite desarrollar interfaces de usuario en el marco de SPA o single page aplications. Para ello, React ha desarrollado su propia sintaxis con base en componentes y hooks. En este post, te enseñaremos qué es y cómo funciona el hook useMemo en React, ideal para memoizar valores

¿Qué es useMemo en React?

useMemo en React es uno de los hooks disponibles en esta librería JavaScript para devolver elementos memoizados. Es decir, funciona para mantener la referencia o dirección de memoria de un dato, del mismo modo que el hook useCallback nos permite mantener la referencia de una función.

Supongamos que tenemos el siguiente botón de login o inicio de sesión:

<Button

className= «loginForm-submit»

type=»submir»

variant=»primary»

disabled={!username || !password || isLoading}

>

Log in

</Button>

Como puedes ver en las líneas de código anteriores, este botón tiene un dato disabled, que determina que el botón se deshabilita cuando cambian los datos de username, password o isLoading. Ahora, podríamos sacar este dato a una variable como la siguiente:

const buttonDisabled = {!username || !password || isLoading}

Esto nos permitiría escribir disabled = {buttonDisabled} en el botón. Aunque en este caso el cálculo de la variable no es tan complejo, puede que haya otros cálculos que le cuestan un poco más a JavaScript. En ambas situaciones podemos usar useMemo en React. Sin embargo, puede ser más útil en cálculos realmente complejos.

useMemo en React funciona de manera similar al useCallback en el sentido en que nos permite guardar un dato a lo largo de los renders. Entonces, lo podemos usar para memoizar datos que son complejos de calcular y recalcular cada vez que se renderiza un componente.

¿Cómo funciona useMemo en React?

useMemo funciona a partir de forzar un caché del valor calculado en una línea de código como la de buttonDisabled. Entonces, en lugar de pasar el cálculo original, podemos pasarle una función que haga dicho cálculo. Si los valores de este cálculo no cambian, no será necesario calcularlo de nuevo, porque tenemos su resultado guardado.

Ahora, lo que podemos hacer con el hook useMemo en React es pasar una serie de dependencias. Entonces, solo si cambian estas dependencias se volverá a hacer el cálculo del valor.

Por ejemplo, supongamos que el cálculo es una suma de 2+3. Como este cálculo se repite varias veces a lo largo de nuestro código, no necesitamos siempre pasar 2+3, sino que podemos pasar el valor memoizado de 5. Entonces, solo si cambian los valores de la suma se volverá a ejecutar el cálculo.

Pensando en el ejemplo anterior, podemos pasar el hook useMemo en React antes del valor de buttonDisabled para guardar su resultado:

const buttonDisabled = useMemo (

( ) => !username || !password || isLoading,

[username, password, isLoading],

)

Con las líneas de código anteriores, estamos pasando una función que ejecuta el cálculo inicial. Gracias a useMemo, el valor del cálculo quedará guardado y no se va a volver a calcular a menos que los valores de username, password o isLoading. que hemos definido en el array de dependencias, cambien.

Es muy importante que pases valores por el array de dependencias de useMemo, pues si no lo haces el valor calculado no cambiará y se mantendrá siempre el inicial. Es decir, no se hará el cálculo ni se recalculará a lo largo de los cambios de valores.

¿Qué sigue?

Ahora que sabes qué es y cómo funciona el hook useMemo en React, ¡es momento de empezar a usarlo en tus propios proyectos! Para conocer más sobre la creación de todo tipo de proyectos de programación para la web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio en el que aprenderás a desarrollar con lenguajes como JSX, JavaScript, HTML y CSS. ¿A qué esperas para escribir tus propias líneas de código? ¡Pide más información y cambia tu vida!

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