Aula 10 – Hooks Avançados: useMemo, useCallback e useRef 🏗️

Além dos hooks básicos, o React oferece ferramentas para lidar com performance e referências diretas ao DOM. Hoje vamos aprender a usar o "cérebro" do React de forma mais eficiente.

🏎️ useMemo: Memorizando Valores

O useMemo serve para evitar que cálculos caros (pesados) sejam refeitos em toda renderização se os dados não mudaram.

const calculoPesado = useMemo(() => {
  return operacaoDemorada(valor);
}, [valor]);

Quando usar?

Use apenas se a operação for realmente lenta. Memorizar tudo sem necessidade pode deixar o código mais complexo e até mais lento.

⚡ useCallback: Memorizando Funções

No React, toda vez que um componente renderiza, as funções dentro dele são "recriadas". O useCallback mantém a mesma instância da função entre as renderizações.

const handleClick = useCallback(() => {
  console.log("Cliquei!");
}, []); // Função memorizada para sempre

📍 useRef: Acesso Direto e Memória Silenciosa

O useRef serve para duas coisas principais: 1. Acessar o DOM: Focar um input, rolar a página, etc. 2. Variável de Instância: Guardar um valor que NÃO dispara re-renderização quando muda.

const inputRef = useRef();

const focarInput = () => {
  inputRef.current.focus(); // Acesso direto ao elemento HTML
};

return <input ref={inputRef} />;

🚀 Prática da Aula

Vamos criar uma lista filtrável ultra-performática.

Gere uma lista de 500 nomes (ou use um array estático grande).
Crie um input de busca.
Use o useMemo para filtrar a lista apenas quando o termo de busca mudar.
Use o useRef para que, ao carregar a página, o cursor já comece dentro do campo de busca.

📊 Comparativo de Hooks

Hook	Objetivo Principal
useMemo	Guardar o resultado de um cálculo.
useCallback	Guardar a referência de uma função.
useRef	Guardar uma referência a um elemento ou valor mutável (sem re-render).

Cuidado com a Otimização Prematura

"Otimização prematura é a raiz de todo mal". Só use esses hooks se você notar que a tela está lenta ou se precisar passar funções para componentes otimizados com React.memo.