Como utilizar o UseMemo de forma correta em suas aplicações React

18/06/2024

O useMemo é um hook do React que você pode usar para melhorar o desempenho de sua aplicação memoizando valores calculados. Isso significa que você pode evitar cálculos desnecessários ao reutilizar valores previamente calculados, desde que as dependências do cálculo não tenham mudado.

Como funciona o `useMemo`

O useMemo aceita dois argumentos:

Uma função que retorna um valor calculado.
Uma lista de dependências.

Ele retorna um valor memoizado que só será recalculado quando uma das dependências mudar.

Sintaxe

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

Quando usar o `useMemo`

Use o useMemo para otimizar componentes que executam cálculos caros ou que dependem de valores que raramente mudam. É particularmente útil em situações onde:

O cálculo é computacionalmente caro e você quer evitar recalculá-lo em cada renderização.
Você tem valores que não mudam com frequência, mas são usados em cada renderização.
Você quer evitar a recriação de objetos ou arrays que podem causar re-renderizações desnecessárias de componentes filhos.

Exemplo Prático

Imagine que você tem uma função que calcula um valor complexo com base em algumas props:

import React, { useMemo } from 'react';
const ExpensiveComponent = ({ a, b }) => {
// Uma função de cálculo cara
const computeExpensiveValue = (a, b) => {
console.log('Calculando valor...');
return a + b; // Simplificação de um cálculo complexo
};
// Usando useMemo para memoizar o valor
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return (
<div>
<p>Valor Calculado: {memoizedValue}</p>
</div>
);
};
export default ExpensiveComponent;

Neste exemplo, computeExpensiveValue é uma função cara. Usando useMemo, garantimos que ela só será chamada novamente quando a ou b mudarem. Isso pode melhorar significativamente o desempenho do componente, especialmente se o cálculo for realmente intensivo.

Considerações Importantes

Uso excessivo: Não use useMemo de forma prematura. Apenas otimizações reais devem ser aplicadas. Muitas vezes, o uso de useMemo não trará benefícios perceptíveis e pode até introduzir complexidade desnecessária.
Dependências: Certifique-se de listar todas as dependências corretamente. Se você esquecer alguma dependência, pode acabar com um valor memoizado incorreto.
Alternativas: Para funções puras e pequenos cálculos, a otimização pode ser insignificante. Considere o uso de useCallback se estiver memoizando funções para passar para componentes filhos.

O useMemo é uma ferramenta que serve para otimizar o desempenho de componentes React, evitando cálculos desnecessários. No entanto, como qualquer otimização, deve ser usado com cuidado e apenas quando necessário. Ao memoizar valores, você pode garantir que sua aplicação React continue responsiva e eficiente, mesmo quando realiza cálculos complexos.

Autor: José Darci Rodrigues Junior