MEJORA EL RENDIMIENTO DE TUS APLICACIONES EN REACT CON EL HOOK USEMEMO

El hook useMemo en React es una herramienta que nos permite memorizar (almacenar en caché) el valor de una función determinada. Esto significa que si los valores de las dependencias de la función no cambian, entonces el valor memorizado se devuelve en lugar de volver a ejecutar la función. Esto puede tener un impacto significativo en el rendimiento de la aplicación, especialmente en componentes que tienen un gran número de cálculos costosos.

Por ejemplo, digamos que tenemos un componente que renderiza una lista de elementos, cada uno con una etiqueta y un precio. El precio se calcula a partir de una serie de operaciones matemáticas complejas. Sin useMemo, cada vez que se actualiza el componente, se ejecutarían de nuevo todas las operaciones matemáticas para cada elemento de la lista. Sin embargo, si utilizamos useMemo para memorizar el valor del precio, sólo se vuelven a calcular los precios si los valores de las dependencias cambian.

Para utilizar useMemo, primero se debe importar desde 'react':

import { useMemo } from 'react';

Luego, se puede utilizar en un componente de la siguiente manera:

const valorMemorizado = useMemo(() => {
  // código que se quiere memorizar
}, [dependencia1, dependencia2, ...]);

Es importante tener en cuenta que las dependencias deben ser valores inmutables, ya que si una dependencia cambia, el valor memorizado se recalcula.

En cuanto a cuándo debe utilizarse useMemo, es recomendable utilizarlo en cualquier lugar donde se estén realizando cálculos costosos y no es necesario recalcularlos a menos que las dependencias cambien. Sin embargo, es importante tener en cuenta que utilizar useMemo puede aumentar la complejidad del código y hacerlo más difícil de depurar, por lo que siempre debe usarse con precaución.

A continuación mostramos un ejemplo más completo de useMemo:

import React, { useMemo } from 'react';

interface Producto {
  nombre: string;
  precio: number;
}

interface Props {
  productos: Product[];
  tasa: number;
}

const ListaProducto = ({ productos, tasa }) => {
  // Utilizamos useMemo para memorizar el cálculo del precio con impuestos
  const tasas = useMemo(() => {
    return productos.map((producto) => {
      return {
        ...producto,
        precioConTasas: producto.precio * (1 + tasa),
      };
    });
  }, [productos, tasa]);

  return (
    <ul>
      { tasas.map((producto) => (
        <li key={ producto.nombre }>
          { producto.nombre } - { producto.precioConTasas }
        </li>
      )) }
    </ul>
  );
};

export default ListaProducto;

En el código anterior utilizamos useMemo para memorizar el cálculo del precio con impuestos de cada producto en una lista. Utilizamos una función para definir la función que se ejecutará dentro de useMemo, y establecemos las dependencias como productos y tasa. Cada vez que cambian estos valores, la función se vuelve a ejecutar y se actualizan los precios con impuestos. Luego, utilizamos la variable tasas para renderizar la lista de productos con los precios con impuestos actualizados.

El hook useMemo debe utilizarse cuando se estén realizando cálculos costosos y no es necesario recalcularlos a menos que las dependencias cambien. Sin embargo, siempre debe usarse con precaución para evitar aumentar la complejidad del código.