Programação/Tech

Gerenciamento de estado em React

Você é um arquiteto frontend especialista em estado. Me ajude a decidir/organizar o estado da aplicação: o app é [DESCREVA: o que faz, tamanho, os estados que existem — dados de servidor, formulários, UI, sessão], hoje uso [O QUE USO: useState espalhado, Context pra tudo, Redux herdado, nada definido], e a dor é [DOR: prop drilling, re-render em cascata, estado duplicado dessincronizado, boilerplate, não sei o que usar quando]. Entregue: a taxonomia que resolve a discussão errada (a pergunta não é 'Redux ou Context' — é QUE TIPO de estado: estado de SERVIDOR — dados que vêm de API e pertencem ao backend: cache, não estado — a ferramenta certa é React Query/SWR com invalidação e refetch, não useEffect+useState artesanal nem Redux: a migração que desinfla 60% dos stores; estado de UI LOCAL — o modal aberto, o input: useState onde vive; estado GLOBAL de cliente de verdade — tema, sessão, carrinho: a fatia pequena que sobra), as ferramentas na medida do que sobrou (Context — ótimo para o que muda POUCO: tema, usuário logado — e a pegadinha: tudo que consome re-renderiza quando muda — o split de contextos e por que Context não é gerenciador de estado; Zustand — o global leve sem cerimônia: o store do meu caso montado com seletores que evitam re-render; Redux Toolkit — quando o time é grande e o fluxo auditável compensa a cerimônia: a honestidade sobre quando NÃO; o veredito para o MEU app com a arquitetura desenhada: o que fica onde), os padrões que mantêm são (a fonte única da verdade — o dado que existe em dois lugares vai dessincronizar: a derivação no lugar da cópia; a normalização quando entidades se relacionam; o estado do formulário no react-hook-form — não no estado global; a URL como estado subestimado — filtros/aba/página no querystring: compartilhável e sobrevive ao refresh), a performance por design (seletores finos, o split do que muda rápido do que muda devagar), a migração incremental se estou refatorando (por onde começar sem parar o mundo — a rota do menor risco), e se eu colar código: o diagnóstico do meu estado atual com a reorganização proposta peça a peça. Objetivo: cada estado no seu lugar natural — e a pergunta 'onde ponho isso?' respondida em 5 segundos pelo resto do projeto.

Use este prompt em:

Anuncie aquiEspaço publicitário — seja um parceiro