📖
Hook

useMemo

Memoiza o RESULTADO de uma computação. Recomputa apenas quando as deps mudam.

📚 O que é

Guarda o valor entre renders. React compara deps com Object.is. Se iguais, retorna valor cacheado. Custo: comparação de deps a cada render.

✅ Quando usar

Computações genuinamente custosas (sort/filter de listas grandes, cálculos matemáticos pesados). Criar objeto/array estável para passar a componente memoizado ou usar como dep de outro hook.

🚫 Quando NÃO usar

Valores primitivos (string, number, boolean). Computações simples/rápidas. Objetos que mudam a cada render de qualquer forma.

👍 Prós
Evita recálculo desnecessário
Estabiliza referências
Melhora performance em listas grandes
👎 Contras
Custo de comparação de deps
Over-use piora performance
Não é garantia — React pode descartar o cache
🔗 Termos relacionados
useState
Hook

Hook básico para estado local do componente.

useEffect
Hook

Roda side effects após o React commitar mudanças no DOM.

useLayoutEffect
Hook

Como useEffect, mas executa síncronamente ANTES do browser pintar.

useCallback
Hook

Memoiza uma FUNÇÃO. Mantém a mesma referência entre renders enquanto deps não mudam.

useRef
Hook

Cria objeto { current } mutável que persiste entre renders sem causar re-render quando alterado.

useReducer
Hook

Alternativa ao useState para estado complexo com múltiplas transições.

useContext
Hook

Lê o valor do Context Provider mais próximo na árvore. Re-renderiza quando value muda.