Context API React Estado: Como Usar em 5 Passos

Se você já se viu passando props por três níveis de componentes só para levar um dado até onde ele é usado, a Context API é a resposta. Ela permite que você compartilhe estado global sem a cerimônia do prop drilling. Neste guia, vou te mostrar como usar a Context API para gerenciar estado em React, com um passo a passo prático e direto.

O que é a Context API e quando usar

A Context API é um recurso do React que cria um canal de comunicação direto entre um componente pai e qualquer componente filho, sem precisar passar props intermediárias. Ela é ideal para estados que muitos componentes precisam acessar, como autenticação, tema ou idioma. Mas atenção: para estado local de um formulário ou de um componente isolado, useState resolve melhor. Não force o uso de Context onde não há necessidade.

Passo 1: Crie o contexto com createContext

O primeiro passo é criar o contexto usando a função createContext. Em um arquivo separado, como AuthContext.js, escreva:

import { createContext } from 'react';

export const AuthContext = createContext(null);

O valor inicial (null) é usado apenas quando não há Provider acima. Esse arquivo será o lar do contexto e do Provider que você criará no próximo passo.

Dica: Use um valor padrão que faça sentido para o seu caso, como null para dados que ainda não chegaram, ou um objeto vazio se preferir.

Passo 2: Crie o Provider para encapsular o estado

O Provider é um componente que vai segurar o estado e disponibilizá-lo para todos os filhos. Ele usa useState ou useReducer internamente, e o valor passado no prop value é o que os componentes vão consumir.

import { useState } from 'react'; import { AuthContext } from './AuthContext';

export function AuthProvider({ children }) { const [user, setUser] = useState(null);

return ( <AuthContext.Provider value={{ user, setUser }}> {children} </AuthContext.Provider> ); }

Erro comum: Esquecer de passar o objeto completo no value. Se você passar apenas user, os componentes não terão acesso ao setUser.

Passo 3: Envolva sua aplicação com o Provider

No componente raiz, como App.jsx, envolva toda a árvore com o Provider que você criou.

import { AuthProvider } from './AuthContext';

function App() { return ( <AuthProvider> <Home /> <Profile /> </AuthProvider> ); }

Agora qualquer componente dentro de AuthProvider pode acessar o contexto. Isso inclui componentes que estão a vários níveis de profundidade, sem precisar passar props manualmente.

Dica: Coloque o Provider o mais alto possível na árvore, mas não acima do necessário, para evitar renderizações desnecessárias.

Passo 4: Consuma o contexto com useContext

Para ler o estado e as funções do contexto, use o hook useContext dentro de qualquer componente filho.

import { useContext } from 'react'; import { AuthContext } from './AuthContext';

export function Profile() { const { user, setUser } = useContext(AuthContext);

return ( <div> <p>{user ? Olá, ${user.name} : 'Você não está logado'}</p> <button onClick={() => setUser({ name: 'João' })}>Logar</button> </div> ); }

Erro comum: Chamar useContext fora de um componente que está dentro do Provider. Isso retorna o valor inicial (null), quebrando a aplicação silenciosamente.

Passo 5: Separe a lógica do contexto em um hook customizado

Crie um hook customizado para encapsular o acesso ao contexto e evitar repetição. Isso também facilita a validação do Provider.

export function useAuth() { const context = useContext(AuthContext); if (context === undefined) { throw new Error('useAuth deve ser usado dentro de AuthProvider'); } return context; }

Agora, em vez de chamar useContext diretamente, você usa useAuth(). Esse padrão torna o código mais limpo e evita erros de contexto ausente.

Dica: Nomeie o hook com o prefixo use para que o React reconheça as regras dos hooks e o ESLint funcione corretamente.

Checklist do que você fez

Você criou um contexto com createContext, construiu um Provider que gerencia o estado com useState, envolveu a aplicação com esse Provider, consumiu o contexto com useContext em componentes filhos e encapsulou tudo em um hook customizado. Esse fluxo resolve o prop drilling em projetos pequenos e médios.

Para projetos muito grandes, com estado complexo e muitas ações, vale avaliar se a Context API sozinha é suficiente. Nesses casos, combinar com useReducer ou até considerar bibliotecas como Redux pode ser mais adequado, mas para a maioria dos cenários do dia a dia, a Context API atende bem.

Perguntas Frequentes

Quando devo usar Context API em vez de prop drilling?

Use Context API quando o mesmo estado for acessado por muitos componentes em diferentes níveis da árvore, como tema ou usuário logado. Se o dado for usado apenas por um componente ou dois, passar props é mais simples e evita renderizações extras.

A Context API substitui o Redux?

Em muitos casos, sim. A Context API resolve o problema de compartilhamento de estado global sem dependências externas. Porém, para gerenciamento de estado complexo com muitas ações e atualizações frequentes, bibliotecas como Redux ou Zustand oferecem ferramentas de desempenho e devtools mais robustas.

Como evitar re-renderizações desnecessárias com Context?

Separe contextos diferentes para cada tipo de dado, em vez de colocar tudo em um só. Além disso, use useMemo no valor do Provider para evitar que ele mude a cada render. Isso reduz o número de componentes que re-renderizam quando o estado muda.

Posso usar Context API com componentes de classe?

Sim, mas a sintaxe é diferente. Em componentes de classe, você usa o Context.Consumer ou o método estático contextType. O hook useContext só funciona em componentes funcionais, que são o padrão recomendado hoje.

Qual a diferença entre Context API e useState?

useState gerencia estado local de um componente. Context API é um mecanismo para compartilhar esse estado entre vários componentes sem prop drilling. Na prática, você usa useState dentro do Provider e a Context API distribui o valor para a árvore.