useMemo
O useMemo é um hook do React que memoriza o resultado de uma função cara ou custosa, evitando recalculá-la desnecessariamente em cada renderização. Isso é útil para melhorar o desempenho, especialmente quando você trabalha com listas grandes ou cálculos complexos.
Vamos ver isso funcionando com o tema Relatório de Vendas de Loja, onde calculamos o total das vendas e aplicamos filtros — mas com useMemo, garantimos que os cálculos só aconteçam quando realmente for necessário!
Exemplo prático — Relatório de Vendas 📈
import React, { useState, useMemo } from 'react';
const salesData = [
{ id: 1, product: 'Camisa', quantity: 10, price: 50 },
{ id: 2, product: 'Calça', quantity: 5, price: 80 },
{ id: 3, product: 'Tênis', quantity: 8, price: 120 },
{ id: 4, product: 'Boné', quantity: 15, price: 30 },
{ id: 5, product: 'Meias', quantity: 20, price: 10 },
];
function SalesReport() {
const [minPrice, setMinPrice] = useState(0);
// Calcula o total das vendas, mas só recalcula quando a lista mudar
const totalSales = useMemo(() => {
console.log('Calculando o total das vendas...');
return salesData.reduce((acc, sale) => acc + sale.quantity * sale.price, 0);
}, []);
// Filtra as vendas, mas só recalcula quando o preço mínimo mudar
const filteredSales = useMemo(() => {
console.log('Filtrando vendas...');
return salesData.filter((sale) => sale.price >= minPrice);
}, [minPrice]);
return (
<div>
<h2>Relatório de Vendas 🛍️</h2>
<p>Total das vendas: R$ {totalSales.toFixed(2)}</p>
<div>
<label>Filtrar por preço mínimo: R$ </label>
<input
type="number"
value={minPrice}
onChange={(e) => setMinPrice(Number(e.target.value))}
/>
</div>
<h3>Vendas filtradas:</h3>
<ul>
{filteredSales.map((sale) => (
<li key={sale.id}>
{sale.quantity}x {sale.product} — R$ {sale.price.toFixed(2)} cada
</li>
))}
</ul>
</div>
);
}
Como funciona o useMemo?
Nesse exemplo, usamos useMemo para otimizar dois processos:
- Total das vendas: Calculamos o valor total, multiplicando a quantidade pelo preço de cada item. Como o total só depende dos dados de vendas, ele só é recalculado se a lista de produtos mudar.
- Filtragem por preço: Aplicamos um filtro para mostrar apenas os produtos acima do valor mínimo definido. A lista filtrada só é recalculada quando o preço mínimo muda.
Se não usássemos useMemo, esses cálculos aconteceriam a cada renderização, mesmo que nada relevante tivesse mudado — desperdiçando processamento e deixando a aplicação mais lenta, especialmente com listas maiores.
Por que usar useMemo?
O useMemo é útil para:
- *Otimizar cálculos complexos: Como totais, estatísticas ou relatórios.
- *Filtragens e buscas: Evitar recalcular listas inteiras se o filtro não mudou.
- *Evitar renderizações desnecessárias: Em componentes que dependem de valores derivados.
Ele é especialmente poderoso em listas grandes ou operações que exigem muita computação, tornando a interface mais fluida e responsiva!
Quando evitar useMemo?
Se o cálculo for simples ou barato, usar useMemo pode ser um exagero. O próprio React já otimiza muitos casos, então o hook é mais valioso quando você percebe gargalos de desempenho reais.
Se você começar a usar useMemo em tudo, pode acabar complicando o código sem necessidade — então a dica é: use com consciência!
Conclusão
O useMemo é um hook essencial para otimizar o desempenho de aplicações React, evitando cálculos desnecessários e mantendo a interface rápida. No exemplo de Relatório de Vendas, ele garantiu que o total e os produtos filtrados só fossem recalculados quando necessário, mesmo com renderizações frequentes.
Se você estiver lidando com listas grandes, cálculos pesados ou transformações complexas de dados, o useMemo é uma ferramenta poderosa para manter sua aplicação eficiente.