# Padrões de estado React: 13 padrões essenciais

> Os padrões de estado React são 13 abordagens essenciais para organizar dados em aplicações React, incluindo estado local, elevado, derivado, context API, reducers e máquinas de estado. Cada padrão resolve problemas específicos de escalabilidade e manutenção, permitindo escolher a solução adequada conforme a complexidade e o compartilhamento de dados entre componentes.

*Net Propaganda · Apps e Software · 14 de setembro de 2026 · Walquíria Bensaúde Tomaz*

Organizar o estado React é o que separa um app que escala de um que vira espaguete. Apresentamos 13 padrões de estado React com exemplos e critérios para escolher o certo.

Organizar o estado de um aplicativo React é o que separa um código que escala de um que vira espaguete. Neste guia, apresentamos 13 padrões de estado React, do mais básico ao mais avançado, com exemplos e critérios para você decidir qual usar em cada situação.

**1. Estado local com useState** O padrão mais simples: cada componente gerencia seu próprio estado com useState. Use quando os dados são usados apenas por aquele componente e seus filhos diretos. Exemplo: um formulário de login que guarda o valor dos campos antes do envio. Cerca de 70% dos estados em um app típico podem ficar aqui.

**2. Elevação de estado (lifting state up)** Quando dois componentes irmãos precisam compartilhar o mesmo dado, mova o estado para o ancestral comum mais próximo. Assim, ambos recebem o valor via props. Exemplo: um painel com filtro de data e lista de resultados, o filtro fica no pai, que repassa para os filhos. Evita duplicação e dessincronização.

**3. Estado derivado** Em vez de armazenar tudo, calcule valores a partir do estado existente durante a renderização. Exemplo: se você tem uma lista de tarefas, o total de concluídas é tarefas.filter(t => t.concluida).length. Armazenar esse total separadamente cria risco de inconsistência. Regra: se pode ser calculado, não guarde.

**4. Estado composto com useReducer** Quando o estado tem múltiplos campos interdependentes e transições complexas, useReducer centraliza a lógica em uma função redutora. Exemplo: um carrinho de compras com ações como adicionar, remover e aplicar cupom. Cada ação tem um tipo e um payload, o que facilita testar e depurar.

**5. Context API para estado global leve** O Context evita passar props manualmente por muitos níveis (prop drilling). Use para dados que mudam pouco, como tema claro/escuro ou usuário autenticado. Exemplo: um app com 20 telas que precisam saber se o usuário está logado. Cuidado: Context re-renderiza todos os consumidores a cada mudança, então não é ideal para estados que mudam a cada segundo.

**6. Estado no servidor com React Query ou SWR** Nem todo estado precisa ser gerenciado no cliente. Bibliotecas como React Query e SWR cuidam de cache, revalidação e sincronização com o servidor. Exemplo: lista de produtos que precisa ser atualizada a cada 30 segundos. Elas reduzem código boilerplate e evitam estados duplicados.

**7. Estado global com Redux** Para aplicações grandes com muitos componentes compartilhando dados complexos, o Redux oferece um store único e previsível. Exemplo: um dashboard financeiro com múltiplas abas que precisam dos mesmos dados de transações. O custo é a curva de aprendizado e o boilerplate, que pode ser mitigado com Redux Toolkit.

**8. Estado atômico com Recoil ou Jotai** Essas bibliotecas tratam o estado como átomos independentes, permitindo atualizações granulares sem re-renderizar todo o app. Exemplo: um editor colaborativo onde cada célula da planilha é um átomo. Ideal para apps com muitos estados pequenos e independentes.

**9. Estado com Zustand** Zustand é uma alternativa minimalista ao Redux, com API baseada em hooks e sem providers. Exemplo: um carrinho de compras em um e-commerce de médio porte. Ele oferece bom equilíbrio entre simplicidade e escalabilidade, sendo adotado por times que querem evitar a complexidade do Redux.

**10. Estado persistido com localStorage ou sessionStorage** Para manter dados entre recarregamentos, sincronize o estado com o armazenamento do navegador. Exemplo: preferências de idioma ou rascunho de um formulário. Use useEffect para ler ao montar e gravar a cada mudança. Cuidado com dados sensíveis: localStorage não é seguro.

**11. Estado de formulário com React Hook Form** Formulários têm necessidades específicas: validação, máscaras, submissão. React Hook Form gerencia o estado sem re-renderizar a cada tecla, usando refs. Exemplo: um cadastro com 15 campos e validação condicional. Reduz o código e melhora a performance.

**12. Estado de URL com query params** Às vezes, o estado deve estar na URL para ser compartilhável ou bookmarkável. Exemplo: filtros de busca em uma listagem de imóveis. Use useSearchParams do React Router para ler e escrever na URL. Isso também ajuda no SEO e na análise de tráfego.

**13. Estado de máquina com XState** Para fluxos com estados finitos e transições bem definidas, máquinas de estado evitam combinações inválidas. Exemplo: um checkout com etapas (carrinho, pagamento, confirmação). XState formaliza isso e permite visualizar o diagrama. É mais indicado para lógicas complexas e críticas.

**Recomendação prática** Comece pelo mais simples: useState e elevação de estado resolvem a maioria dos casos. Se o estado é compartilhado por muitos componentes e muda com pouca frequência, Context API. Para dados do servidor, React Query ou SWR. Se a aplicação cresce e o estado global fica complexo, avalie Redux, Zustand ou Recoil. A escolha depende do tamanho do time, da frequência de atualizações e da necessidade de persistência.

## FAQ

### O que é estado em React?

Estado é um objeto que representa dados que podem mudar ao longo do tempo em um componente. Ele é gerenciado internamente pelo React e, quando alterado, provoca uma nova renderização. Pode ser local (useState) ou global (Context, Redux).

### Quando usar Context API em vez de Redux?

Use Context para estados globais simples e que mudam pouco, como tema ou autenticação. Redux é mais indicado para estados complexos, com muitas ações e necessidade de rastreamento. Context não é otimizado para atualizações frequentes.

### Qual a diferença entre useState e useReducer?

useState é para estados independentes e simples. useReducer é para estados com múltiplos campos e lógica de transição complexa, pois centraliza as atualizações em uma função redutora, facilitando testes e manutenção.

### Posso usar mais de um padrão de estado no mesmo projeto?

Sim, é comum combinar padrões. Por exemplo, useState para estados locais, Context para tema e React Query para dados do servidor. O importante é manter a coerência e evitar duplicação de fontes de verdade.

### O que é elevação de estado?

É mover o estado para o ancestral comum mais próximo de dois ou mais componentes que precisam compartilhá-lo. Assim, o estado fica em um único lugar e é passado via props, evitando dessincronização.

### Quando usar XState?

XState é útil para fluxos com estados finitos e transições bem definidas, como máquinas de estado em checkouts ou assistentes. Ele evita combinações inválidas e documenta o comportamento, mas adiciona complexidade para casos simples.

---

Fonte (canonical): https://netpropaganda.com.br/apps-e-software/padroes-de-estado-react-13-padroes-essenciais/