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

createContext Criando Contexto

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

createContext Criando Contexto

createContext cria um objeto Context que permite aos dados viajar por níveis da árvore sem ter de passar props por cada componente intermediário. Ele vem com um componente Provider que transmite um valor para baixo e se combina com useContext do lado da leitura. Serve a dados genuinamente globais, como um tema, um idioma ou o usuário atual. O próprio objeto é a chave: useContext localiza o Provider correspondente por identidade, então o mesmo contexto pode ser criado uma vez no nível do módulo e consumido de qualquer lugar.

GrupoPadrões de Componentes
TipoAPI
DesdeReact 16.3

ℹ️ 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

import { createContext } from 'react'

// the default value applies when there is no Provider upstream
const ThemeContext = createContext('light')

<ThemeContext.Provider value="dark">
  …every component downstream can read 'dark'…
</ThemeContext.Provider>

⚙️ Parâmetros

defaultValueO valor de fallback retornado por useContext quando nenhum Provider correspondente é encontrado à frente; passar undefined explicitamente torna o Provider obrigatório.

Retorna：Retorna um objeto Context: ele carrega os componentes Provider e Consumer e é, ele mesmo, a chave que useContext lê.

▶ Exemplo

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

Saída：

A página mostra "Hello!" — App usa o Provider para transmitir en a um componente profundo, e Greeting o lê sem receber uma única prop.
▶ Experimente

💡 Pontos-chave

💡 Dica O argumento de createContext é um valor padrão de fallback e não um valor inicial: assim que existir um Provider acima, o valor desse Provider vence.
ℹ️ Informação Um valor de contexto alterado renderiza novamente todo consumidor, e é por isso que o setter do useState costuma ser agrupado ao valor do Provider.
⚠️ Aviso Não transforme toda prop em context — use-o apenas para dados que são realmente globais, ou a reutilização e a legibilidade dos seus componentes vão sofrer.
usecontext provider-pattern component-tree props
Mais casos em breve.

📚 Tutoriais Relacionados

Context e Estado Global
Lição 13: o uso completo de createContext, Provider e padrões de consumo.

❓ Perguntas Frequentes

P O argumento de createContext é um valor inicial?
R Ele só atua como fallback quando não há Provider acima; quando existe um Provider, seu valor sobrescreve o padrão completamente.
P O Provider precisa ficar acima do componente consumidor?
R Sim. useContext sobe pela árvore de componentes até o Provider mais próximo e só recorre ao valor padrão quando não encontra nenhum.
P Como escolher entre Context e props?
R Dentro de dois níveis de aninhamento, passe props; recorra ao Context apenas quando os dados precisam atravessar muitos níveis e são compartilhados globalmente, como um tema, um usuário ou um idioma.
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%