useContext para estado global
Crie um Context, envolva uma subárvore com seu Provider e consuma o valor com useContext para compartilhar o estado de tema ou autenticação sem passar props por vários níveis.
useContext para estado global é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O problema da passagem excessiva de propriedades
A passagem excessiva de propriedades consiste em transmitir dados por vários componentes intermediários que não os utilizam, apenas para alcançar um componente filho profundamente aninhado. O contexto resolve isso tornando um valor disponível para qualquer componente da árvore, sem uma transmissão explícita.
Criando um contexto
createContext(defaultValue) cria um objeto de contexto. O valor padrão é usado quando um componente lê o contexto sem um provedor correspondente acima dele.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Fornecendo o contexto
Envolva a parte da árvore que precisa do contexto com o provedor. Todos os componentes internos poderão ler o valor do contexto.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>Consumo com useContext
Qualquer componente dentro do provedor pode acessar o valor do contexto com useContext(ThemeContext). Não é necessário passar nada como propriedade.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Gancho personalizado para encapsular useContext
Exporte um gancho personalizado que chama useContext internamente. Isso é mais organizado do que expor o contexto diretamente e permite adicionar validações.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Novas renderizações do contexto
Quando o valor do provedor muda, todos os consumidores são renderizados novamente. Se o valor for um objeto, uma nova referência de objeto a cada renderização fará com que todos os consumidores sejam renderizados novamente. Memorize o valor com useMemo para evitar isso.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Quando usar o contexto
Adequado para: tema, localidade, usuário autenticado, sinalizadores de funcionalidade, sistema de notificações. Não é ideal para: atualizações de alta frequência (a cada tecla pressionada), estado grande e complexo (use um gerenciador de estado).
Vários contextos
Você pode ter vários contextos independentes. Mantenha-os focados — um AuthContext para autenticação, um ThemeContext para o tema. Evite um único contexto onipotente que contenha tudo.
Contexto versus Redux
O contexto é integrado e suficiente para dados globais que mudam com pouca frequência. Redux/Zustand/Pinia são melhores para estados complexos com muitas atualizações, depuração com viagem no tempo ou necessidades de uma camada intermediária.
Padrão de contexto de autenticação
Um padrão comum: um AuthContext que mantém o usuário atual e os métodos de autenticação. Os componentes consumidores obtêm o usuário sem nenhuma passagem de propriedades em cadeia.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Contexto e TypeScript
Defina o tipo do contexto com uma interface. Use o valor nulo como valor inicial e lance um erro no gancho personalizado se ele for nulo. Isso impede que o estado impossível de 'consumido fora do provedor' passe silenciosamente.
Desempenho: memo + contexto
Os componentes envolvidos com React.memo não são renderizados novamente a menos que suas propriedades mudem. Se a saída de um consumidor de contexto depender apenas de parte do contexto, divida o contexto ou use padrões de seleção para evitar novas renderizações desnecessárias.
Verificação rápida
O que useContext(MyContext) retorna quando é chamado dentro de um componente que não tem nenhum provedor acima dele?
Recapitulação: useContext
createContext cria um contexto com um valor padrão. Envolva a árvore com o provedor para fornecer um valor. useContext lê o valor em qualquer lugar dentro dele. Ganchos personalizados encapsulam useContext para validação. Memorize o valor do provedor para evitar novas renderizações desnecessárias. Use-o para dados globais que mudam com pouca frequência, como tema e autenticação.
Perguntas Frequentes
A aula “useContext para estado global” é grátis?
Sim — o texto completo de “useContext para estado global” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “useContext para estado global”?
Crie um Context, envolva uma subárvore com seu Provider e consuma o valor com useContext para compartilhar o estado de tema ou autenticação sem passar props por vários níveis. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “useContext para estado global”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- useContext para estado global
- useReducer para estado complexo
- useMemo e useCallback para desempenho
- Hooks personalizados: extraindo lógica reutilizável