🧠 Otimização no React: O Que, Quando e Por Quê

Source: Dev.to

React.memo (Memoriza um Componente)

O que faz:
Envolve um componente funcional. Se as props do componente filho forem as mesmas da renderização anterior, o React pula completamente a re‑renderização desse componente. É o “porteiro” do componente.

Quando usar:
Quando você tem um componente que é lento e re‑renderiza frequentemente sem que suas props realmente mudem.

useMemo (Memoriza um Valor)

O que faz:
Memoriza o resultado (o valor) de uma função de cálculo. O cálculo só é refeito se as variáveis listadas no seu array de dependências mudarem.

Quando usar:
Quando você tem um cálculo pesado ou complexo (ex.: filtros, somas grandes, ordenação) dentro do seu componente, e quer evitar que ele seja re‑executado em toda renderização.

useCallback (Memoriza uma Função)

O que faz:
Memoriza a referência da função em si. Evita que o JavaScript crie uma nova função em um endereço de memória diferente a cada renderização.

Quando usar:
Quase exclusivamente quando você precisa passar uma função como prop para um componente filho otimizado com React.memo. Ele garante que o filho não re‑renderize desnecessariamente, pois a prop (a função) mantém a mesma referência.