Cuándo y cómo usar useMemo en React

Mientras trabajaba en el desarrollo de la interfaz, es posible que se haya topado con useMemo. Para aquellos que no estén familiarizados con él, explicaremos cómo usar useMemo en React y también los casos de uso más importantes/prominentes.

¿Qué es useMemo?

useMemo es un gran enlace incorporado que puede ayudar con el rendimiento de su aplicación web. Sabemos que en react , los componentes se representan cada vez que hay un cambio en el estado o las propiedades del componente.

Los componentes que se vuelven a renderizar también volverán a calcular las funciones que se utilizan en su interior.

Por lo tanto, si hay funciones costosas y pesadas, el rendimiento puede verse afectado, ya que deben calcularse cada vez. useMemo ayuda a memorizar estas funciones para optimizar el rendimiento.

¿Cómo funciona useMemo en React?

Para comprender useMemo, debemos reflexionar sobre qué es la memorización .

Si hay una función que es costosa, como obtener una gran cantidad de datos, la memorización es una forma de almacenar el resultado de esa función para que no tenga que llamarse una y otra vez.

useMemo tomará la función que está empaquetando y almacenará en caché los resultados de esa función para que pueda proporcionársela cuando sea necesario sin tener que volver a realizar los cálculos.

¿Cómo se usa useMemo en React?

Como gancho incorporado, puede importar el gancho de React y usarlo en el nivel superior.

Luego, puede envolver su cálculo costoso con useMemo declarando alguna constante o variable y asignándola al resultado de su gancho.

No olvide agregar sus dependencias, ya que así es como useMemo determina si debe volver a calcular la función nuevamente.

Si su dependencia cambia, useMemo sabrá volver a calcular el valor para que almacene en caché el resultado correcto en todo momento.

 import { useMemo } from 'react' ; function someExpensiveFunction ( n ) {   return n * n; } function myFunction ( {n} ) {   const result = useMemo( () => someExpensiveFunction(n), [n]);   return (       < div > {result} </ div >
 ); }

Por ejemplo, si pasó el valor 5 a

 n

 n

Esto es especialmente útil cuando su aplicación frontend realiza solicitudes a una API.

Estas solicitudes pueden ser costosas, especialmente si está obteniendo grandes cantidades de datos.

Tal vez su aplicación tenga algunos componentes que necesitan estos datos, pero no desea realizar una llamada a la API cada vez que se representa el componente.

Entonces, almacenar en caché sus resultados con useMemo puede ser su mejor opción.

 import React, { useMemo } from 'react' ; import axios from 'axios' ; const ApiComponent = () => {   const memoizedResults = useMemo( async () => {       try {           const apiResponse = await axios.get( 'http://apicall.com/somedata' );           return apiResponse.data; } catch (error) {           return error; } }, []);   return (       < div > {apiResponse} </ div >
 ) }

Como puede ver, nuestra dependencia está vacía porque solo queremos que se represente una vez, ya que el valor en realidad no cambiará. Solo queremos hacer la llamada a la API una vez, cuando se renderiza por primera vez.

Luego, este valor se reutilizará en renderizaciones posteriores.

¿Cuándo usar useMemo es una mala idea?

Tan útil como es el gancho, usar useMemo constantemente no es necesariamente una buena idea. Puede ser tentador envolver cada función que escriba con useMemo para 'guardar' los cálculos.

Sin embargo, usarlo cuando no es necesario puede ralentizar su aplicación.

1. Cálculos triviales

Si la función que está empaquetando con useMemo es un cálculo simple, entonces el costo de usar useMemo puede ser más importante.

Si puede determinar que el peso de su función es bastante pequeño, por ejemplo, O (n) tiempo, entonces es apropiado determinar que el gancho no es necesario.

2. Cuando su función puede afectar estados y variables externas

Si su función implica realizar modificaciones a otras variables globales, o depende de ellas, entonces usar useMemo puede no ser una buena idea.

Como se describió anteriormente, useMemo solo vuelve a calcular la función cuando cambia una dependencia.

Sin embargo, si la función utiliza variables o llamadas que no son necesariamente un cambio de dependencia, entonces no volverá a calcular el valor, lo que hará que el resultado almacenado en caché sea incorrecto.

¿Cuál es la diferencia entre useMemo y useCallback?

Algunos de ustedes también pueden estar familiarizados con useCallback, que tiene un propósito similar al de useMemo. Este artículo no profundizará en useCallback, pero diferenciaremos cuándo usar las dos funciones.

Puede ser fácil confundir useMemo y useCallback, porque ambos son ganchos que funcionan para optimizar su aplicación al memorizar algo para usted. Sin embargo, es importante tener en cuenta que lo que están memorizando es diferente.

En la mayoría de los casos, useMemo memoriza valores mientras que useCallback memoriza funciones. Como se ve en el nombre, useCallback se usa para memorizar las funciones de devolución de llamada, especialmente aquellas que se transmiten a los componentes secundarios como accesorios. Las funciones de devolución de llamada pueden depender de ciertos valores o referencias que pueden cambiar con el tiempo, lo que significa que las actualizaciones de estas funciones provocarán una nueva representación en los componentes que las usan. Por lo tanto, memorizarlos puede ayudar a evitar que se vuelvan a renderizar, lo que puede costarnos la optimización.

Sin embargo, como useMemo puede memorizar tanto funciones como valores, puede usarse en lugar de ganchos useCallback. Aún así, es importante considerar el contexto de su situación y usar los ganchos apropiadamente para usarlos según lo previsto.

Pensamientos finales

useMemo en general... es un gancho excelente y flexible que puede memorizar valores para usted y evitar que se vuelvan a renderizar. Al usar el enlace estratégicamente, puede optimizar su aplicación, reducir los cálculos y permitir que el usuario tenga una experiencia más rápida y fluida.

Deje que useMemo brinde a sus usuarios una... ¡experiencia memorable!