Melhores Práticas de Gerenciamento de Estado
Um resumo condensado das 25 práticas mais importantes, extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 práticas mais importantes, extraídas de todas as páginas desta seção.
Classifique o estado primeiro: Rotule cada peça como servidor, UI do cliente, URL/navegação, formulário ou segredo - depois combine com uma ferramenta. Escolhas aleatórias de bibliotecas criam caches sobrepostos.
Query em primeiro lugar para dados de API: TanStack Query gerencia listas, detalhes, carregamento, erros, deduplicação e atualização em segundo plano. Não crie manualmente useEffect fetch na quinta tela conectada à rede.
Mantenha a UI do cliente fora do cache do Query: Alternadores de tema, etapas de assistente e flags de modal não são chaves de consulta. O uso indevido da semântica de cache serializa a UI na infraestrutura do servidor.
Pilha padrão para novos projetos: TanStack Query (servidor) + Zustand ou Context dividido (cliente) + parâmetros de busca do Expo Router (filtros compartilháveis). Adicione Redux apenas quando um ADR o exigir.
useState para UI efêmera da tela: Modais abertos, seleções de tela única e toggles simples permanecem locais até que outra rota realmente precise do valor.
useReducer para transições acopladas: Assistentes, pequenos formulários com vários campos e máquinas de estado recebem um reducer - não cinco chamadas useState independentes que saem de sincronia.
Divida o Contexto por frequência de atualização: Tema, estado da sessão e ações vivem em contextos separados. Um mega-contexto re-renderiza a lista a cada tick do carrinho.
Memoize valores do provider: useMemo para objetos de estado e useCallback para ações. Um { signOut: () => ... } inline no valor do provider quebra React.memo downstream.
Use Zustand quando seletores importam: Carrinho global, preferências e flags precisam de assinaturas granulares. Selecione primitivos - useStore((s) => s.count) - não a store inteira.
Uma store por domínio: cartStore, preferencesStore - não appStore com quarenta campos não relacionados. Ciclos de importação e resets de teste ficam dolorosos rapidamente.
Redux Toolkit quando auditoria importa: Fluxos de trabalho regulamentados, requisitos de DevTools e ecossistemas de middleware justificam o RTK. Não para um contador de badges no primeiro dia.
Não execute dois caches de servidor: Escolha TanStack Query ou RTK Query para a mesma API - nunca ambos. A migração é feita fatia por fatia com uma lista de verificação.
Conecte o ciclo de vida do mobile para Query: onlineManager + NetInfo e focusManager + AppState na inicialização. Os padrões da web não atualizam os dados ao reativar o app.
Ajuste staleTime e gcTime deliberadamente: Leituras de catálogo toleram minutos de staleness; saldos e totais de checkout não. Documente os padrões em createQueryClient.
Otimize mutações com rollback: Use onMutate, cancelQueries, snapshot previous e restaure em onError. useState otimista manual escala mal entre telas.
Persista leituras, não segredos: persistQueryClient e Zustand persist para catálogos públicos e preferências. Tokens de acesso vão para expo-secure-store - nunca AsyncStorage.
Hidrate antes de rotear: A sessão e as preferências persistidas devem terminar de carregar antes de escolher as pilhas de autenticação vs. app. Combine com splash screen para evitar o flash da tela de login.
Limpe todas as camadas no logout: Token seguro, fatias do Zustand, cache do Query e persistidor de disco. Tablets compartilhados vazam PII quando apenas uma camada é limpa.
Estado da URL via parâmetros do Expo Router: Filtros e abas que o marketing quer compartilhar pertencem a useLocalSearchParams - não a uma store global que quebra deep links.
Formulários permanecem localizados: React Hook Form ou reducer no nível da tela para inputs; useMutation no submit. Não transmita cada pressionamento de tecla para o Zustand.
Jotai para UIs atômicas apenas quando justificado: Painéis de construtor e inspetor se beneficiam de átomos derivados. Desenvolvedores iniciantes conhecem Zustand - documente Jotai em um ADR se adotado.
Teste os limites da store: Reinicie o Zustand com setState(initial, true); QueryClient isolado com retry: false. Simule a rede na borda do serviço, não dentro dos reducers.
Meça antes de otimizar: O Profiler do React DevTools na rolagem da lista é melhor que a adoção prematura do Jotai. Corrija tempestades de providers antes de espalhar React.memo em duzentas linhas.
Versione esquemas persistidos: Incremente name: "preferences-v3" ou o buster do Query em mudanças de API ou formato que quebram compatibilidade. OTA sem cache bust analisa JSON obsoleto em crashes.
Registre a decisão em um ADR: Antes que a equipe B instale MobX enquanto a equipe A usa Redux, escreva ADR: Seleção de Gerenciamento de Estado e vincule-o dos módulos da store.
TanStack Query + useState/useReducer nas telas. Adicione Zustand quando uma segunda rota precisar do mesmo estado do cliente. Adicione Context para sessão se Zustand parecer pesado para um único objeto de usuário.
Trilhas de auditoria, requisitos de depuração com time-travel e padrões organizacionais existentes. Veja Redux Toolkit.
Mesmos dados de API editados em Zustand e Query; token no cache do Query; filtro na store global mas não na URL quando compartilhável. Execute a lista de verificação em Noções Básicas de Gerenciamento de Estado.
Versões da Pilha: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026