Redux vs Context: estado global sem dogma

Redux vs Context: estado global sem dogma

Robson Rabelo - 12 de julho de 2026 - 0 visualizações

Context é injeção de dependência, Redux é gerenciador de estado, e a maior parte do seu 'estado global' não pertence a nenhum dos dois. As 4 caixas de estado e o dono de cada uma.

Poucas discussões de front-end geram tanta guerra santa quanto "Redux ou Context?". E como toda guerra santa, ela costuma partir de uma premissa errada: os dois não são concorrentes diretos, e boa parte do que os times guardam neles não deveria estar em nenhum dos dois.

Primeiro, o que cada um É

Context não é um gerenciador de estado. É um mecanismo de injeção de dependência: entrega um valor para componentes distantes sem passar prop por dez níveis (react.dev). O estado em si continua sendo um useState/useReducer de alguém.

Redux é um gerenciador de estado: um store central, mudanças por ações explícitas, ferramentas de depuração (viagem no tempo, log de ações) e, na forma moderna do Redux Toolkit, muito menos boilerplate do que a fama sugere (redux.js.org).

A diferença técnica que decide na prática: granularidade de re-render. Quando um valor de Context muda, todos os consumidores re-renderizam, mesmo os que usam outra parte do objeto. O Redux (e os gerenciadores modernos) tem seletores: o componente assina a fatia que usa, e só re-renderiza quando ela muda.

// Context: TODO consumidor re-renderiza quando QUALQUER campo muda
const App = () => (
  <AppContext.Provider value={{ usuario, tema, carrinho, notificacoes }}>
    ...
  </AppContext.Provider>
);

// Redux: cada componente assina só a sua fatia
const total = useSelector((s) => s.carrinho.total); // re-render só se total mudar

A pergunta que ninguém faz: que TIPO de estado é esse?

Antes de escolher ferramenta, classifique o dado. A maioria dos "estados globais" cai em quatro caixas com donos diferentes:

Os 4 tipos de estado e a ferramenta de cada um

  1. Estado do servidor (a maior caixa): produtos, pedidos, perfil: dados que moram no backend e você só cacheia. Guardá-los no Redux é reimplementar cache, revalidação e loading na mão. Ferramentas de server state (React Query/TanStack Query, SWR) resolvem isso por ofício, e costumam esvaziar 70% do store.
  2. Estado de UI local: modal aberto, aba ativa, input controlado. useState no componente. Subir isso para um store global é burocracia pura.
  3. Estado global de baixa frequência: tema, idioma, usuário logado. Muda raramente, todo mundo lê: Context é perfeito aqui (a re-renderização geral não dói porque a mudança é rara).
  4. Estado global complexo do cliente: carrinho com regras, editor com desfazer/refazer, fluxo multi-etapas com interações entre partes. Aqui um gerenciador dedicado paga a conta: Redux Toolkit (rastreabilidade e devtools fortes) ou Zustand (a mesma granularidade com API mínima).

Com essa classificação, a "guerra" evapora: Context e Redux resolvem caixas diferentes, e a caixa 1 (a que mais entope stores) não pertence a nenhum dos dois.

Os sinais de que a escolha atual está errada

  • Digitação lenta em formulário: input controlado dentro de um Context gordo re-renderizando a árvore a cada tecla. (O Profiler denuncia.)
  • Store cheio de isLoading/error por recurso: você reimplementou o React Query na mão, sem cache nem revalidação.
  • Ninguém sabe por que o estado mudou: mutações espalhadas sem rastro pedem as ações explícitas e o devtools do Redux.
  • Um Context com 15 campos: fatie por frequência de mudança (tema muda por ano; notificações, por minuto) ou migre as fatias quentes para um store com seletores.

O guia de bolso

  • Comece com useState local e suba o estado só quando dois lugares precisarem.
  • Dados do servidor → React Query/SWR, sempre. É a decisão de maior impacto da lista.
  • Tema/idioma/sessão → Context, sem culpa.
  • Cliente complexo e interativo → Zustand pela simplicidade, Redux Toolkit quando rastreabilidade e convenções de time grande importam.
  • E lembre dos Server Components: no App Router, muito "estado global de dados" vira busca no servidor, e a discussão inteira encolhe.

A escolha certa aqui define a manutenibilidade do front por anos, e revisitá-la num app que cresceu é refatoração clássica que fazemos no serviço de Desenvolvimento Web, Mobile e Desktop.

Seu store tem mais isLoading do que regra de negócio? Descreva o que vive nele para a IA da Rabelo Digital, aqui no canto da tela, e ela devolve a classificação nas quatro caixas. Sem formulário, sem espera.


Leia também

Compartilhar:

Deixe um Comentário

Categorias

Posts Recentes