Tu app React tiene 15 developers, 40 rutas y mezcla Redux, Context, useState local y llamadas fetch directas. El estado es impredecible y hay bugs de sincronización. ¿Cómo refactorizas la arquitectura de estado?
Contexto
Fintech con app de banca digital. El equipo creció rápido y cada dev eligió su solución de estado. Hay 200+ useEffects que sincronizan estado entre stores. Los bugs de "dato stale" son el #1 en el backlog.
Respuesta modelo
Estrategia de separación: 1) Clasificar todo el estado existente en 3 categorías: server state (datos del API), client state (UI local), y shared UI state (modales, tema). 2) Migrar server state a TanStack Query: elimina la necesidad de sincronizar manualmente y resuelve bugs de stale data con invalidación automática. 3) Client state local con useState/useReducer — no necesita store global. 4) Shared UI state mínimo con Zustand (reemplazar Redux gradualmente). 5) Crear un ADR y un diagrama de decisión: "¿De dónde viene el dato? → API = Query, UI local = useState, Compartido = Zustand". 6) Migrar una feature completa como ejemplo y documentar el patrón.
Claves
- Separar server state de client state es la decisión arquitectónica clave.
- TanStack Query elimina el 80% de los useEffects de sincronización.
- Migración gradual feature por feature, no big-bang.