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!
