O hook useMemo permite memorizar o resultado de uma função, otimizando cálculos custosos ao armazenar o resultado em cache. É vantajoso quando há cálculos frequentes e que consomem muitos recursos, mas que produzem o mesmo resultado quando os dados não mudam. Isso elimina a necessidade de recálculos redundantes, resultando em melhor desempenho.

Sintaxe:

Declara-se uma nova variável, como cachedValue, e atribui-se a ela o hook useMemo. Dentro dos parênteses do hook, fornece-se uma função (por exemplo, calculateValue), que será executada para calcular o valor memorizado. Essa função pode ser qualquer função JavaScript válida. Além disso, inclui-se um segundo argumento—um array chamado dependencies—que consiste nos valores dos quais o valor memorizado depende.

const cachedValue = useMemo(calculateValue, dependencies)

Quando qualquer dependência especificada no array dependencies for alterada, o valor memorizado será recalculado. No entanto, se as dependências permanecerem as mesmas entre renderizações, o React retornará o valor previamente calculado sem novo cálculo.

Note

Essa otimização contribui para melhorar o desempenho ao evitar cálculos desnecessários, resultando em uma experiência de usuário mais eficiente.

Exemplo 1

Vamos criar o componente ShoppingCart, que irá armazenar as informações sobre a quantidade de produtos selecionados pelo usuário. Além disso, ele irá gerenciar a lógica para calcular o valor total, indicando o valor que o usuário deve pagar. Nosso objetivo principal é memorizar o valor total e recalculá-lo apenas quando o usuário modificar a prop products passada para 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>
  );
};

O cálculo do totalPrice é realizado dentro do hook useMemo, o que evita recálculos desnecessários a cada nova renderização do componente.

Explicação linha por linha:

• Linha 1: Importação do hook useMemo da biblioteca React para utilizar sua funcionalidade;
• Linha 3: Definição do componente ShoppingCart utilizando a sintaxe convencional de função;
• Linhas 4-10: Criação da variável totalPrice, responsável pelo valor total que o usuário deve pagar. O hook useMemo é utilizado para evitar cálculos em cada renderização;
  • Linhas 5-9: Dentro da arrow function passada para o useMemo, é implementada a lógica para calcular o sum total. Cada item do array products é percorrido, multiplicando o preço pela quantity e somando ao valor da variável sum;
  • Linha 10: O array de dependências [products] é fornecido ao hook useMemo. Isso indica que o valor memorizado deve ser recalculado caso o array products seja alterado.
• Linhas 12-31: Renderização da marcação do componente.

1. Linha 16: O método map é utilizado para renderizar cada produto do array products, criando o elemento JSX correspondente;
2. Linha 17: O atributo key é definido para garantir a renderização eficiente dos itens do array e ajudar o React a identificar cada item de forma única;
3. Linha 28: O valor da variável totalPrice é exibido dentro do JSX, mostrando o valor total calculado.

Código completo do aplicativo:

Nota

É recomendável não misturar os hooks useEffect e useMemo para garantir clareza e evitar confusão. A principal diferença está em seus respectivos propósitos: useEffect é utilizado para gerenciar efeitos colaterais e o ciclo de vida do componente, enquanto useMemo memoriza cálculos custosos para melhorar o desempenho.