English 中文 العربية 日本語 Português

useContext Lendo Contexto

Última atualização: 2026-11-03

useContext Lendo Contexto

useContext recebe um objeto Context criado por createContext e retorna o valor do Provider mais próximo acima dele, ou o valor padrão quando não há Provider. Ele permite que um componente profundo pegue os dados diretamente, pulando cada camada intermediária, e põe fim à passagem interminável de props pela árvore. A própria chamada não recebe dependências, mas todo consumidor renderiza de novo sempre que o valor muda, então vale a pena manter o valor estável.

GrupoPadrões de Componentes
TipoHook
DesdeReact 16.8

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const value = useContext(MyContext)
// MyContext must be the object returned by createContext itself
// value is always exactly the v of <MyContext.Provider value={v}> above

⚙️ Parâmetros

Context objectO objeto retornado por createContext. Observe que você passa o próprio objeto, e não o componente Provider.

Retorna：Retorna o valor do Provider atual mais próximo; quando não há Provider acima, retorna o valor padrão dado a createContext.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

A página mostra "Current user: Alice"; se você mudar o valor do Provider para null, Avatar automaticamente recorre a "Not signed in".
▶ Experimente

💡 Pontos-chave

💡 Dica Chame useContext no nível superior de um componente; quando o valor muda, todo componente que consome esse Context renderiza de novo automaticamente.
ℹ️ Informação Se os consumidores também precisarem atualizar os dados, coloque o setter do useState no valor também: { user, setUser }.
⚠️ Aviso Se o valor for um objeto criado a cada renderização, todos os seus consumidores renderizam de novo junto com o Provider — use useMemo para manter a referência estável.
createcontext provider-pattern component-tree usestate
Mais casos em breve.

📚 Tutoriais Relacionados

Context e Estado Global
Lição 13: o comportamento de re-renderização de useContext e a combinação de múltiplos contextos.

❓ Perguntas Frequentes

P useContext dispara uma re-renderização?
R Quando o valor muda, todo componente que lê esse Context com useContext renderiza de novo; quando o valor se mantém igual, nada acontece.
P Posso usar vários contextos de uma vez?
R Sim, chame useContext uma vez por contexto; alternativamente, um único contexto que retorna um objeto composto mantém as coisas mais simples.
P Por que devo passar o objeto Context em vez do Provider?
R useContext localiza o Provider correspondente pela identidade do objeto, então passar um componente não faz sentido e o React lança um erro.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%