Mejores prácticas de State Management
Un resumen condensado de las 25 prácticas más importantes extraídas de todas las páginas de esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 prácticas más importantes extraídas de todas las páginas de esta sección.
Clasifica el estado primero: Etiqueta cada pieza como servidor, cliente UI, URL/navegación, formulario o secreto - luego selecciona una herramienta. Las elecciones aleatorias de librerías crean cachés superpuestos.
Query-first para datos de API: TanStack Query posee listas, detalles, carga, errores, deduplicación y actualización en segundo plano. No hagas fetch manual con useEffect en la quinta pantalla en red.
Mantén la UI del cliente fuera del caché de Query: Las alternativas de tema, pasos del asistente y banderas de modal no son claves de query. Usar mal la semántica de caché serializa la UI en infraestructura de servidor.
Stack greenfield por defecto: TanStack Query (servidor) + Zustand o Context dividido (cliente) + parámetros de búsqueda de Expo Router (filtros compartibles). Agrega Redux solo cuando un ADR lo requiere.
useState para UI de pantalla efímera: Modal abierto, selección de una sola pantalla y alternadores simples se quedan locales hasta que otra ruta realmente necesite el valor.
useReducer para transiciones acopladas: Asistentes, pequeños formularios de múltiples campos y máquinas de estado obtienen un reductor - no cinco llamadas useState independientes que se desincronizarán.
Divide Context por frecuencia de actualización: El tema, estado de sesión y acciones viven en contextos separados. Un mega-contexto re-renderiza la lista en cada cambio de carrito.
Memoriza valores de proveedor: useMemo para objetos de estado y useCallback para acciones. Inline { signOut: () => ... } en el valor del proveedor rompe React.memo aguas abajo.
Recurre a Zustand cuando los selectores importan: Carrito global, preferencias y banderas necesitan suscripciones de grano fino. Selecciona primitivos - useStore((s) => s.count) - no toda la tienda.
Una tienda por dominio: cartStore, preferencesStore - no appStore con cuarenta campos no relacionados. Los ciclos de importación y reinicializaciones de pruebas se vuelven dolorosos rápidamente.
Redux Toolkit cuando la auditoría importa: Flujos regulados, DevTools mandatorio y ecosistemas de middleware justifican RTK. No para un contador de insignia en el primer día.
No ejecutes dos cachés de servidor: Elige TanStack Query o RTK Query para la misma API - nunca ambas. La migración es segmento por segmento con una lista de verificación.
Conecta el ciclo de vida móvil para Query: onlineManager + NetInfo y focusManager + AppState en bootstrap. Los valores por defecto web no re-traen datos en primer plano de aplicación.
Ajusta staleTime y gcTime deliberadamente: Las lecturas de catálogo toleran minutos de antigüedad; los saldos y totales de pago no. Documenta los valores por defecto en createQueryClient.
Mutaciones optimistas con reversión: Usa onMutate, cancelQueries, snapshot previous y restaura en onError. El useState optimista manual escala mal entre pantallas.
Persiste lecturas, no secretos: persistQueryClient y Zustand persist para catálogo público y preferencias. Los tokens de acceso van a expo-secure-store - nunca AsyncStorage.
Hidrata antes del enrutamiento: La sesión y las preferencias persistidas deben terminar de cargarse antes de elegir entre stacks de autenticación y aplicación. Empareja con retención de splash para evitar destello de pantalla de inicio de sesión.
Limpia todas las capas al cerrar sesión: Token seguro, slices de Zustand, caché de Query y persistidor de disco. Las tabletas compartidas filtran información personal cuando solo una capa se limpia.
Estado de URL vía parámetros de Expo Router: Los filtros y pestañas que el marketing quiere compartibles pertenecen a useLocalSearchParams - no a una tienda global que rompe enlaces profundos.
Los formularios se quedan colocalizados: React Hook Form o reductor a nivel de pantalla para entradas; useMutation al enviar. No transmitas cada pulsación de tecla a Zustand.
Jotai para UIs atómicas solo cuando se justifique: Los paneles de constructor e inspector se benefician de átomos derivados. Por defecto, la gente conoce Zustand - documenta Jotai en un ADR si se adopta.
Prueba los límites de la tienda: Reinicia Zustand con setState(initial, true); QueryClient aislado con retry: false. Simula la red en el borde del servicio, no dentro de reductores.
Mide antes de optimizar: React DevTools Profiler en desplazamiento de lista vence a la adopción prematura de Jotai. Corrige tormentas de proveedor antes de rociar React.memo en doscientas filas.
Versionea esquemas persistidos: Aumenta name: "preferences-v3" o Query buster en cambios de API o forma que rompan. OTA sin cache bust analiza JSON obsoleto en fallos.
Registra la decisión en un ADR: Antes de que el equipo B instale MobX mientras el equipo A usa Redux, escribe ADR: Selección de State Management y enlázalo desde módulos de tienda.
TanStack Query + useState/useReducer en pantallas. Agrega Zustand cuando una segunda ruta necesita el mismo estado del cliente. Agrega Context para sesión si Zustand te parece pesado para un objeto de usuario.
Registros de auditoría, requisitos de depuración con viaje en el tiempo y estándares organizacionales existentes. Ve Redux Toolkit.
Los mismos datos de API editados en Zustand y Query; token en caché de Query; filtro en tienda global pero no en URL cuando es compartible. Ejecuta la lista de verificación en Bases de State Management.
Versiones del stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026