🧠 useMemo vs useCallback no React: Quando e Por Que Usar?

Quando começamos a otimizar componentes React, dois hooks aparecem com frequência: useMemo e useCallback. Ambos servem para evitar reexecuções desnecessárias, mas cada um tem um papel específico.

Neste post, você vai aprender:

• A diferença entre os dois hooks
• Quando usar cada um
• Exemplos práticos com código
• Erros comuns
• Boas práticas de performance

🔍 O que é useMemo?

O useMemo serve para memorizar valores computados. Ideal para evitar que funções pesadas sejam reexecutadas a cada render.

const memoizedValue = useMemo(() => {
  return expensiveComputation(a, b);
}, [a, b]);

✅ Use quando:

• Você tem uma função pesada que retorna um valor
• Esse valor depende de variáveis que nem sempre mudam

🧰 Exemplo prático:

const sum = useMemo(() => {
  console.log('calculando...');
  return a + b;
}, [a, b]);

Se a e b não mudarem, o valor é reaproveitado e a função não roda de novo.

🔁 O que é useCallback?

O useCallback memoriza funções. Isso evita que a função seja recriada a cada render — útil especialmente ao passar callbacks para componentes filhos otimizados com React.memo.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

✅ Use quando:

• Precisa passar funções para filhos otimizados
• Quer manter a mesma referência entre renders

🧰 Exemplo prático:

const handleClick = useCallback(() => {
  console.log("clicado!");
}, []);

return <Button onClick={handleClick} />;

Se Button usar React.memo, ele só será renderizado novamente se handleClick mudar — e o useCallback impede isso sem necessidade.

📌 Resumo Rápido

⚠️ Armadilhas Comuns

• Usar sem necessidade: se o valor ou função for leve, pode ser melhor deixar o React fazer seu trabalho.
• Dependências erradas: esquecer de colocar todas as dependências pode causar bugs difíceis de rastrear.
• Otimização prematura: só otimize quando tiver um motivo real, como renderizações desnecessárias.

💡 Dica de Ouro

Antes de usar useMemo ou useCallback, identifique um problema real de performance.

Ferramentas como React DevTools são ótimas para isso.

📦 Bônus: analogia para lembrar

• useMemo = cache de valor
• useCallback = cache de função

✍️ Conclusão

useMemo e useCallback são ferramentas poderosas para otimizar a performance no React. Mas como qualquer ferramenta de performance, devem ser usadas com consciência.

Já teve uma situação onde um desses hooks salvou seu código? Compartilha esse post com a galera dev e bora trocar ideia! 🚀