Context API
A Context API no React é uma ferramenta poderosa que permite compartilhar dados entre componentes sem a necessidade de prop drilling, ou seja, sem passar propriedades manualmente por múltiplos níveis de componentes. Ela é especialmente importante em aplicações modernas e SPAs, onde a estrutura de componentes pode se tornar complexa e a manutenção de estados globais se torna desafiadora.
O Context API é ideal para gerenciar informações que precisam ser acessadas por múltiplos componentes, como temas, dados do usuário, preferências de idioma ou configurações globais da aplicação. Ele funciona criando um contexto com createContext, que fornece um Provider para disponibilizar dados e funções, e um Consumer ou o hook useContext para consumir esses dados em componentes filhos.
Neste tutorial avançado, você aprenderá a criar Contextos reutilizáveis, otimizar o fluxo de dados entre componentes e evitar erros comuns como renderizações desnecessárias e mutações de estado. Também abordaremos as melhores práticas de React, como separar Contextos para diferentes domínios de estado, manter a performance da aplicação e integrar Context API em aplicações complexas e escaláveis.
Exemplo Básico
jsximport React, { createContext, useState, useContext } from 'react';
// Criação do Contexto de Tema
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
const ThemeSwitcher = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return ( <div> <p>Tema atual: {theme}</p> <button onClick={toggleTheme}>Alterar Tema</button> </div>
);
};
const App = () => ( <ThemeProvider> <ThemeSwitcher /> </ThemeProvider>
);
export default App;Neste exemplo básico, criamos um ThemeContext com createContext. O ThemeProvider utiliza useState para gerenciar o estado do tema e fornece a função toggleTheme para alternar entre "light" e "dark". O Provider encapsula os componentes filhos e disponibiliza os valores de contexto.
O componente ThemeSwitcher consome o contexto usando useContext, acessando diretamente theme e toggleTheme. Isso elimina a necessidade de prop drilling, simplifica a manutenção do código e demonstra um padrão de reutilização de Contextos. Em aplicações reais, este padrão é útil para gerenciamento de temas, preferências de usuário e outros estados globais que precisam ser compartilhados em múltiplos componentes.
Exemplo Prático
jsximport React, { createContext, useState, useContext, useEffect } from 'react';
// Criação do Contexto de Usuário
const UserContext = createContext();
const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Simulação de chamada a API
setTimeout(() => {
setUser({ name: 'João Silva', role: 'Admin' });
setLoading(false);
}, 1500);
}, []);
const logout = () => setUser(null);
return (
<UserContext.Provider value={{ user, loading, logout }}>
{children}
</UserContext.Provider>
);
};
const UserProfile = () => {
const { user, loading, logout } = useContext(UserContext);
if (loading) return <p>Carregando dados...</p>;
if (!user) return <p>Nenhum usuário logado</p>;
return ( <div> <h2>Bem-vindo, {user.name}</h2> <p>Função: {user.role}</p> <button onClick={logout}>Sair</button> </div>
);
};
const App = () => ( <UserProvider> <UserProfile /> </UserProvider>
);
export default App;No exemplo prático, o UserProvider gerencia o estado do usuário e o status de carregamento com useState e useEffect, simulando uma chamada a API. O Provider disponibiliza user, loading e a função logout para os componentes filhos.
O UserProfile utiliza useContext para consumir os dados do contexto e atualizar a interface de forma condicional, exibindo mensagens de carregamento, usuário logado ou nenhum usuário. Esse padrão melhora a separação entre estado e interface, garante manutenção fácil e previne re-renderizações desnecessárias, mantendo a performance da aplicação.
As melhores práticas ao utilizar Context API incluem: posicionar Providers no nível correto da árvore de componentes, dividir Contextos para diferentes domínios de estado e utilizar setState ou useReducer para atualizar o estado de forma segura.
Erros comuns incluem: armazenar estado local diretamente no Context, alterar valores do Context diretamente e não gerenciar atualizações assíncronas corretamente. Para debugging, recomenda-se usar o React DevTools. Otimizações de performance incluem dividir Contextos, usar React.memo e useMemo, e minimizar atualizações de contexto desnecessárias. Considerações de segurança incluem evitar armazenar dados sensíveis diretamente no Context, como tokens de autenticação.
📊 Tabela de Referência
| React Element/Concept | Description | Usage Example |
|---|---|---|
| createContext | Cria um Contexto para compartilhamento de dados | const ThemeContext = createContext(); |
| Provider | Disponibiliza valores do Context para componentes filhos | <ThemeContext.Provider value={{ theme }}></ThemeContext.Provider> |
| useContext | Hook para consumir valores de Contexto | const theme = useContext(ThemeContext); |
| useState | Gerencia estado local no Provider | const [theme, setTheme] = useState('light'); |
| useEffect | Gerencia lifecycle e efeitos colaterais | useEffect(() => { fetchData(); }, []); |
A Context API oferece uma maneira eficiente de compartilhar estado global, evitando prop drilling e melhorando a manutenção do código. As práticas essenciais incluem criação de Providers, consumo com useContext, gerenciamento de dados assíncronos e otimização de renderizações.
Para avançar, é recomendado estudar ferramentas avançadas de gerenciamento de estado como Redux ou Zustand para compreender a diferença entre Context simples e soluções completas. Aplicar Context API corretamente permite criar aplicações React escaláveis, eficientes e fáceis de manter.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo