Como Melhorar a Performance no React com memo, useMemo e useCallback: Conceitos e Exemplos Visuais na Prática

Quando falamos em performance em aplicações React, um dos primeiros pontos a considerar é a renderização de componentes. React é eficiente, mas aplicações complexas com muitos componentes podem sofrer com re-renderizações desnecessárias. Felizmente, a própria biblioteca oferece ferramentas como React.memo, useMemo e useCallback para nos ajudar a evitar esse problema. Neste artigo, vamos explorar como cada um deles funciona, com exemplos visuais e aplicações práticas.

O problema da re-renderização

Imagine um componente Pai que renderiza um componente Filho. Se o componente Pai for re-renderizado, todos os seus filhos também serão, mesmo que suas props não tenham mudado. Em muitos casos, isso é desnecessário e pode causar lentidão visível em aplicações maiores.

React.memo: memorizando componentes

React.memo é uma HOC (Higher Order Component) que evita a re-renderização de um componente funcional caso suas props não tenham mudado. Ele funciona de forma semelhante ao PureComponent das class components.

Copiar
const Botao = React.memo(({ onClick, children }) => {
  console.log("Renderizou Botao");
  return <button onClick={onClick}>{children}</button>;
});

Nesse exemplo, Botao só será re-renderizado se onClick ou children mudarem. Caso contrário, React reaproveita o resultado da renderização anterior.

useCallback: memoizando funções

Um dos maiores inimigos do React.memo é a criação de novas funções em toda renderização. Isso acontece porque funções em JavaScript são objetos e têm referências diferentes, mesmo que o conteúdo seja igual. É aqui que useCallback entra.

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

return <Botao onClick={handleClick}>Clique</Botao>;

Usar useCallback evita que uma nova referência seja criada em cada renderização, garantindo que o componente memorizado com React.memo realmente não precise ser re-renderizado.

useMemo: memorizando valores derivados

useMemo serve para evitar que cálculos pesados sejam refeitos sem necessidade. É útil para evitar processamento excessivo dentro do componente, e também é muito usado para evitar passar objetos novos como props, o que quebraria a memorizacão com React.memo.

Copiar
const listaOrdenada = useMemo(() => {
  return lista.sort((a, b) => a.nome.localeCompare(b.nome));
}, [lista]);

Se lista não mudar, o useMemo devolve o mesmo resultado anterior, evitando recalcular.

Exemplo visual prático

Imagine uma aplicação com uma lista de produtos e um contador de likes:

Copiar
function App() {
  const [likes, setLikes] = useState(0);

  const produtos = useMemo(() => gerarProdutos(), []);
  const curtir = useCallback(() => setLikes(l => l + 1), []);

  return (
    <div>
      <h1>Total de Likes: {likes}</h1>
      <Botao onClick={curtir}>Curtir</Botao>
      <ListaProdutos produtos={produtos} />
    </div>
  );
}

const ListaProdutos = React.memo(({ produtos }) => {
  console.log("Renderizou ListaProdutos");
  return (
    <ul>
      {produtos.map(p => (
        <li key={p.id}>{p.nome}</li>
      ))}
    </ul>
  );
});

Nesse cenário, mesmo clicando no botão de "Curtir" (o que re-renderiza App), a ListaProdutos não é re-renderizada porque a referência de produtos se manteve estável com useMemo, e o componente está memorizado com React.memo.

Considerações importantes

Não adianta usar memo, useMemo e useCallback em todos os lugares. O custo da memorizacão pode ser maior do que o da renderização em si. Essas ferramentas devem ser usadas quando há provas de que um componente é re-renderizado desnecessariamente e isso afeta a performance. Ferramentas como o React DevTools e console.log podem ajudar a detectar esses casos. Melhorar a performance de aplicações React vai além de escrever componentes funcionais. É preciso entender o ciclo de renderização, identificar gargalos e aplicar otimizações de forma criteriosa. React.memo, useMemo e useCallback são aliados poderosos nesse processo quando usados com intenção clara e conhecimento dos efeitos colaterais. Com boas práticas e testes constantes, é possível manter a interface responsiva e eficiente, mesmo em cenários complexos.