Memorización

Es el proceso por el cual guardamos en memoria componentes y funciones, esto para que estén disponibles en todo momento y en caso de una renderización por un cambio de estado o por el paso propiedades, si estos componentes guardados en memoria no sufren algún cambio, permanecerán tal cual y no se volverán a renderizar.

Esto para optimizar el renderizado y que solo se renderice lo que sea necesario, ayudando a optimizar el uso de recursos.

Advertencia: La documentación de React pide que el uso de la memorización se use con cautela, ya que un mal uso de esta puede generar un gasto mayor de los recursos y que se pierda el objetivo principal de la memorización.

Métodos usados

• memo
• useMemo
• useCallback

¿Cuando usar la memorización?

• Cuando se vea una degradación en los tiempos de renderización.
• Con el uso de componentes muy grandes.
• En procesos muy pesados que solo se deben de ejecutar cuando las properties cambien.

Memo

Es un método de React para la memorización de componentes.

En el siguiente código se muestra como utilizar la funcionalidad de memo dentro de un componente.

• Importamos la función memo de react.
• Envolvemos todo nuestro componente en la función memo para que se aplique la memorización.

import { memo } from "react";

export const Small = memo(({ value }) => {
  console.log("Me volvi a renderizar");
  return <small>{value}</small>;
});

Pueden ver el código completo en el siguiente link

El ejemplo consiste en tener un contador con dos botones, el primer botón incrementa el contador en uno y se muestra el incremento en pantalla, el segundo botón maneja un estado para simular el ocultar y mostrar algo.

Como pueden ver, el componente Small tiene un console.log que muestra el mensaje en la consola del navegador “Me volví a renderizar”. Este mensaje se pinta cada vez que hay un cambio en el contador.

Si presionas el botón para incrementar el contador podremos observar que en la consola se muestra el mensaje de “Me volví a renderizar”. Ahora si presionamos el botón de Show/Hide, veremos que cambia el estado del botón, pero en consola no se muestra el mensaje anterior.

Esto se debe a que el componente de Small está envuelto en la función de memo, por lo cual al no verse afectado por el cambio de estado de botón de Show/Hide, este se mantiene igual y no es renderizado.

Si quitaras la función memo del componente Small y vuelves a probar el botón de Show/Hide, el mensaje de “Me volví a renderizar” se muestra en la consola, indicando que el componente está siendo renderizado nuevamente.

Este es un ejemplo sencillo de como usar la función memo para la memorización.

useMemo

Es un hook de react que nos permite alamcenar en caché el resultado de un proceso que sea muy pesado y que no requiera ser renderizado a menos que su información sea modifica.

En el siguiente link pueden ver el ejemplo usando el hook useMemo.

import { useMemo } from "react";

const heavyStuff = (iterationNumber = 100) => {
  for (let i = 0; i < iterationNumber; i++) {
    console.log("ahi vamos ...");
  }
  return `${iterationNumber} iteraciones realizadas`;
};

const memoizedValue = useMemo(() => {
  heavyStuff(counter);
}, [counter]);

En el ejemplo tenemos una función llamada heavyStuff, la cual nos genera una iteración n cantidad de veces, al renderizar el componente la primera vez y cada vez que precionamos el botón para incrementar el contador.

Si el resultado de esta función no se guardara con useMemo, cada vez que se renderizara el componente por cualquier otra acción que no fuera la de incrementar el contador, la función volvería a ejecutarse y eso generaría un consumo incensario de recursos.

useMemo requiere la función la cual va a memorizar el resultado y el parámetro que hará que vuelva a ejecutarse la función para actualizar el resultado.

const dataMemoized = useMemo(() => funcion(param), [param]);

useCallback

Es un hook de react, muy similar a useMemo, solamente que este hook lo utilizaremos para memorizar funciones y solamente se volvera a ejecutar cuando algo cambie.

El ejemplo lo podremos encontrar en el siguiente link

const [count, setCount] = useState(10);

const incrementFunction = useCallback(() => {
  setCount((value) => value + 1);
}, []);

En el ejemplo lo que haremos es almacenar la función que aumenta nuestro contador. Revisar la consola para visualizar los render que se realizan.

Tomar en cuenta que al almacenar la función en memoria debemos estar consientes de que la función que hemos guardado, si sufre algún cambio que haga que la función sea diferente a la guardada originalmente por primera vez, el useCallback volverá a guardar la función como si fuera otra, colocando esta nueva función en un nuevo espacio de memoria, lo cual provocara que nuestro objetivo de usar la memorización no se cumpla.

Este sería un ejemplo de nuestra función siendo memorizada cada vez que hay un cambio, en este caso, el valor del contador, lo cual provoca que se guarde como una nueva función en memoria.

const [count, setCount] = useState(10);

const incrementFunction = useCallback(() => {
  setCount(counter + 1);
}, [counter]);