Squad Front

Appearance

useMemo ​

O useMemo é um Hook que permite memorizar o resultado de um cálculo caro entre renderizações.

Como funciona? ​

O React só re-executará a função de cálculo quando uma das dependências mudar. Caso contrário, ele retornará o valor armazenado em cache da última renderização.

javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Quando usar? ​

  1. Cálculos Pesados: Processamento de grandes listas, cálculos matemáticos complexos ou transformações de dados custosas.
  2. Referential Equality (Igualdade Referencial): Quando você cria um objeto ou array que será passado como prop para um componente otimizado (React.memo) ou como dependência para outro Hook. Se você não usar useMemo, um novo objeto {} é criado em toda renderização, quebrando a otimização.

Exemplo de Uso: ​

javascript
const sortedList = useMemo(() => {
  console.log('Ordenando lista...');
  return [...users].sort((a, b) => a.name.localeCompare(b.name));
}, [users]); // Só re-ordena se a lista de usuários mudar

Quando NÃO usar? ​

  1. Operações simples: Não use useMemo para somar dois números ou concatenar strings. O custo de manter o cache é maior que o cálculo em si.
  2. Valores que mudam em toda renderização: Se uma dependência muda em todo ciclo, o useMemo nunca usará o cache e apenas adicionará sobrecarga.

Melhores Práticas ​

  • Código Limpo: Tente primeiro escrever o código sem useMemo. Só adicione se você notar problemas de performance ou se precisar garantir a identidade do objeto para evitar loops de renderização.
  • Não confie no useMemo para lógica semântica: O React pode descartar o cache por motivos de performance. Seu código deve funcionar corretamente mesmo que o cálculo seja refeito.