El hook useMemo nos permite memorizar el resultado de una función, optimizando cálculos costosos mediante el almacenamiento en caché del resultado. Es ventajoso cuando se realizan cálculos frecuentes e intensivos en recursos que producen el mismo resultado si los datos no cambian. Esto elimina la necesidad de recalcular de forma redundante, lo que resulta en un mejor rendimiento.

Sintaxis:

Se declara una nueva variable, como cachedValue, y se le asigna el hook useMemo. Dentro de los paréntesis del hook, se proporciona una función (por ejemplo, calculateValue), que se ejecutará para calcular el valor memorizado. Esta función puede ser cualquier función válida de JavaScript. Además, se incluye un segundo argumento—un array llamado dependencies—que consiste en los valores de los que depende el valor memorizado.

const cachedValue = useMemo(calculateValue, dependencies)

Cuando alguna de las dependencias especificadas en el array dependencies cambia, el valor memorizado se volverá a calcular. Sin embargo, si las dependencias permanecen iguales entre renderizados, React devolverá el valor previamente calculado sin volver a calcularlo.

Nota

Esta optimización ayuda a mejorar el rendimiento al evitar cálculos innecesarios y resulta en una experiencia de usuario más eficiente.

Ejemplo 1

Creemos el componente ShoppingCart, que almacenará la información sobre la cantidad de productos que el usuario selecciona. Además, gestionará la lógica para calcular la suma total, indicando el monto que el usuario debe pagar. Nuestro objetivo principal es memorizar la suma total y recalcularla solo cuando el usuario modifique la prop products que se pasa a este componente.

import React, { useMemo } from "react";

const ShoppingCart = ({ products }) => {
  const totalPrice = useMemo(() => {
    let sum = 0;
    for (const item of products) {
      sum += item.price * item.quantity;
    }
    return sum;
  }, [products]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {products.map(({ id, name, price, quantity }) => (
          <li key={id}>
            <p>
              <span>{name} -</span>
              <span>
                ${price} x {quantity}
              </span>
            </p>
          </li>
        ))}
      </ul>
      <h3>
        Total Price: <span>${totalPrice}</span>
      </h3>
    </div>
  );
};

El cálculo de totalPrice se realiza dentro del hook useMemo, lo que previene el recálculo innecesario en cada nueva renderización del componente.

Explicación línea por línea:

• Línea 1: Se importa el hook useMemo de la librería React para aprovechar su funcionalidad;
• Línea 3: El componente ShoppingCart se define utilizando la sintaxis convencional de función;
• Líneas 4-10: Se crea la variable totalPrice, responsable del precio total que el usuario debe pagar. Se utiliza el hook useMemo para evitar realizar cálculos en cada renderizado;
  • Líneas 5-9: Dentro de la función flecha pasada a useMemo, se implementa la lógica para calcular la suma total (sum). Se itera sobre cada elemento del array products, multiplicando el precio por la prop quantity y sumándolo a la variable sum;
  • Línea 10: Se proporciona el array de dependencias [products] al hook useMemo. Esto indica que el valor memorizado debe recalcularse si el array products cambia.
• Líneas 12-31: Se renderiza el marcado del componente.

1. Línea 16: Se utiliza el método map para renderizar cada producto en el array products, creando el elemento JSX correspondiente;
2. Línea 17: Se establece el atributo key para asegurar una renderización eficiente de los elementos del array y ayudar a React a identificar cada elemento de forma única;
3. Línea 28: Se renderiza el valor de la variable totalPrice dentro del JSX, mostrando el precio total calculado.

Código completo de la aplicación:

Nota

Es recomendable no mezclar los hooks useEffect y useMemo para garantizar claridad y evitar confusiones. La diferencia clave radica en sus respectivos propósitos: useEffect se utiliza para gestionar efectos secundarios y el ciclo de vida del componente, mientras que useMemo memoriza cálculos costosos para mejorar el rendimiento.