0Pricing
React Academy · Aula

Quando não usar Context

Reconheça os casos em que passar propriedades, usar composição ou um gerenciador de estado é mais adequado.

Quando não usar Context é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá quando o React Context é a ferramenta inadequada e reconhecerá situações em que passar propriedades, usar composição ou adotar um gerenciador de estado é uma opção melhor e mais simples.

O Contexto não é uma solução universal

O Contexto costuma ser usado em excesso. Os desenvolvedores recorrem a ele para evitar qualquer passagem de propriedades, mas isso cria dependências ocultas, torna os componentes mais difíceis de testar e pode prejudicar o desempenho.

Quando as propriedades são melhores

Se um valor é usado por 1–3 componentes estreitamente aninhados, passar propriedades é mais simples, explícito e fácil de rastrear. O Contexto acrescenta código repetitivo do provedor e oculta o fluxo de dados.
// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Quando a composição é melhor

Se você precisa evitar a passagem de propriedades por mais de 3 níveis, tente primeiro a composição: passe o consumidor totalmente renderizado como uma propriedade. Não é necessário usar Contexto, e o fluxo de dados continua explícito.

O Contexto causa acoplamento oculto

Um componente que chama useContext(UserCtx) não pode ser reutilizado sem envolvê-lo em um UserProvider. As propriedades tornam as dependências explícitas — você consegue ver exatamente do que um componente precisa na assinatura dele.

Atualizações de alta frequência

Não use o Contexto para valores que mudam muitas vezes por segundo (por exemplo, a posição do mouse e o progresso de uma animação). Cada mudança renderiza novamente todos os consumidores. Em vez disso, use referências, armazenamentos externos ou uma biblioteca baseada em sinais.

O Contexto não é um gerenciador de estado

O Contexto apenas distribui valores — ele não oferece armazenamento em cache, ferramentas de desenvolvimento nem camadas intermediárias integradas. Para estados compartilhados complexos com atualizações frequentes, use Zustand, Redux ou Jotai, que foram criados para essa finalidade.

O estado do servidor não pertence ao Contexto

Dados obtidos de um servidor (uma lista de usuários ou publicações) não pertencem ao Contexto. React Query, SWR e RTK Query gerenciam o estado do servidor com armazenamento em cache, novas buscas em segundo plano e estados de erro — o Contexto não gerencia nenhum desses aspectos.

O estado de formulários não pertence ao Contexto

Gerenciar campos de formulário no Contexto faz com que cada tecla pressionada renderize novamente todos os consumidores do Contexto. Em vez disso, use o estado local do componente ou uma biblioteca de formulários, como React Hook Form.

Quando o Contexto IS a ferramenta certa

O Contexto é ideal para: o estado do usuário atual e da autenticação, o tema (claro/escuro), a localidade e a internacionalização, além de outros valores estáveis e transversais que muitos componentes leem, mas que raramente mudam.

Verificação rápida

Qual tipo de dado é LEAST apropriado para armazenar no Contexto do React?

Recapitulação

Use o Contexto para valores estáveis e transversais, como autenticação, tema e localidade. Prefira propriedades para 1–3 níveis de passagem. Prefira a composição para evitar a passagem por vários níveis. Use React Query para o estado do servidor e Zustand ou Redux para estados compartilhados complexos.

Curso concluído

Parabéns! Você concluiu **Padrões e desempenho do Contexto do React**. Agora você sabe como dividir contextos, memorizar valores, aplicar seletores e — igualmente importante — quando não usar o Contexto de forma alguma.

Perguntas Frequentes

A aula “Quando não usar Context” é grátis?

Sim — o texto completo de “Quando não usar Context” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Quando não usar Context”?

Reconheça os casos em que passar propriedades, usar composição ou um gerenciador de estado é mais adequado. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 4 de 4.

Quanto tempo leva a aula “Quando não usar Context”?

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 React Academy?

Sim. Cada aula de React 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

  1. Dividindo contextos para limitar novas renderizações
  2. Memorizando valores de contexto com useMemo
  3. Padrão de seletor de contexto
  4. Quando não usar Context
← Voltar para React Academy