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

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.