React Hook - useMemo §

---

O useMemo é um React Hook que proporciona uma maneira de memorizar valores computados, evitando recálculos desnecessários durante re-renderizações de componentes. Esse Hook é útil em situações em que há operações computacionais intensivas e desejamos otimizar o desempenho, garantindo que essas operações sejam realizadas apenas quando necessário.

Sintaxe §

A sintaxe básica do useMemo envolve a criação de uma função que retorna o valor a ser memorizado e uma array de dependências. O valor computado será recalculado apenas quando as dependências no array sofrerem alterações.

import React, { useMemo } from 'react';
 
const MeuComponente = ({ listaDeItens }) => {
  // Memorizar a lista filtrada
  const listaFiltrada = useMemo(() => {
    return listaDeItens.filter(item => item.valor > 10);
  }, [listaDeItens]);
 
  return (
    <div>
      {listaFiltrada.map(item => (
        <p key={item.id}>{item.nome}</p>
      ))}
    </div>
  );
};

Neste exemplo, a função passada para useMemo filtra a listaDeItens com base em um critério específico, e a lista resultante é memorizada. Isso significa que a filtragem só será realizada novamente se a listaDeItens sofrer alterações.

Nota

Ao invés de utilizar o Hook useMemo, você pode usar a função React.memo().

Caso de uso §

O useMemo é frequentemente utilizado para otimizar o desempenho em operações computacionais custosas, como transformações de dados, cálculos complexos ou chamadas de API. No exemplo fornecido, temos um componente que recebe uma lista de itens e filtra essa lista com base em um valor específico. O uso do useMemo garante que a filtragem só seja recalculada quando a lista de itens for modificada, evitando reprocessamento desnecessário.

import React, { useMemo } from 'react';
 
const MeuComponente = ({ listaDeItens }) => {
  // Memorizar a lista filtrada
  const listaFiltrada = useMemo(() => {
    return listaDeItens.filter(item => item.valor > 10);
  }, [listaDeItens]);
 
  return (
    <div>
      {listaFiltrada.map(item => (
        <p key={item.id}>{item.nome}</p>
      ))}
    </div>
  );
};

Ao utilizar useMemo, garantimos que a filtragem da lista seja uma operação eficiente e só ocorra quando necessário, contribuindo para um desempenho mais otimizado do componente.

Quando usar useMemo?

O useMemo é mais benéfico em situações onde há operações computacionais intensivas que não precisam ser recalculadas a cada re-renderização do componente. Em componentes onde o desempenho não é uma preocupação crítica ou onde os cálculos são simples, o uso de useMemo pode não ser tão crucial.

Lembre-se de que a otimização prematura nem sempre é necessária, e é crucial avaliar se a aplicação realmente se beneficia do uso de useMemo em situações específicas. Utilize-o com sabedoria, focando em áreas do código onde a otimização é necessária para proporcionar uma experiência mais eficiente aos usuários.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)