Quando você deve usar useMemo e useCallback, e qual problema eles resolvem?

Question

Accepted Answer

Ambos armazenam algo entre renderizações para que não seja recompilado/recriado a cada vez:
- **`useMemo`** armazena um **valor computado**.
- **`useCallback`** armazena a **identidade de uma função** (é `useMemo(() => fn, deps)`).

Eles existem para evitar (a) repetir trabalho caro e (b) quebrar a igualdade referencial que filhos memoizados dependem.

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## Por que isso importa

Sem `useCallback`, `handleSelect` é uma função completamente nova a cada renderização. Um `React.memo(Grid)` veria uma prop "nova" e renderizaria mesmo assim, derrotando a memoização. O mesmo vale para um objeto passado a um filho memoizado ou usado em uma matriz de dependência `useEffect`.

## Compensações — não as use em excesso

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoização não é gratuita: custa memória mais uma comparação de dependência em **cada** renderização.
- Uma matriz de dependência errada/ausente lhe dá **valores obsoletos** — o bug mais comum.
- Só memoize quando tiver medido um problema real (um cálculo caro ou um filho memoizado que renderiza demais). `useMemo`/`useCallback` prematuro em todo lugar adiciona ruído e pode até ser mais lento. (O compilador React 19 pode auto-memoizar, reduzindo a necessidade.)