📖
Hook

useRef

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

📚 O que é

Dois usos principais: 1) Ref para elemento DOM (acesso direto). 2) Valor mutável que você quer manter entre renders sem triggering re-render. ref.current pode ser alterado livremente.

✅ Quando usar

Acessar DOM diretamente (focus, measure, scroll). Guardar instância de biblioteca externa. Guardar timer ID ou valor anterior. Interoperação com código não-React.

🚫 Quando NÃO usar

Armazenar dados que precisam aparecer na UI quando mudam (use useState). Dados que participam do fluxo de dados (use state/props).

👍 Prós
Sem re-render ao alterar
Persiste entre renders
Acesso direto ao DOM
Perfeito para valores 'behind the scenes'
👎 Contras
Mudança não dispara re-render (intencional, mas confunde)
Acesso antes de montar retorna null
Não reativo — UI não atualiza automaticamente
🔗 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.

useMemo
Hook

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

useCallback
Hook

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

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.