📖
Hook

useContext

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

📚 O que é

Toda vez que o value do Provider muda, TODOS os componentes que chamam useContext(MyContext) re-renderizam — mesmo que só usem parte do valor. Não tem seletor por padrão.

✅ Quando usar

Dados que raramente mudam: tema (dark/light), idioma, usuário logado. Dados que muitos componentes em nível profundo precisam acessar.

🚫 Quando NÃO usar

Estado que muda frequentemente (causará re-renders em cascata). Substituição de state management robusto em apps grandes. Quando passar por apenas 1-2 níveis (props são mais claras).

👍 Prós
Evita prop drilling
Simples de implementar
Nativo do React (sem lib)
👎 Contras
Todos consumers re-renderizam quando value muda
Sem seletor nativo
Performance ruim para state dinâmico
Difícil de otimizar sem libs extras
🔗 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.

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.