Mejores prácticas de arquitectura
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Comienza con feature slices, no microservicios: Coloca pantallas, hooks y componentes por área de producto en features/<name>/ - evoluciona la estructura con el tamaño del equipo, no sistemas distribuidos desde el primer día.
Mantén las rutas Expo Router delgadas: app/**/*.tsx re-exporta pantallas de características y analiza parámetros - la lógica empresarial pertenece a src/features/, no a archivos de ruta.
Expone una API pública por característica: Organiza features/<name>/index.ts - características hermanas importan el barrel, nunca rutas profundas en components/ o model/.
Respeta el flujo de dependencia hacia adentro: app → features → entities → shared - el código compartido nunca importa características; las entidades nunca importan características.
Coloca primitivos compartidos en shared/ui: Componentes genéricos Button y Screen viven en compartidos; componentes específicos del dominio como UserAvatar viven en entities/user/ui.
Modela sustantivos en entities: Tipos simples y funciones puras para User, Order - cero importaciones de React, comprobables en Node sin un renderer.
Oculta IO detrás de adaptadores: createOrdersApi(client) y createSecureTokenStorage() - las pantallas y casos de uso nunca llaman a fetch o SecureStore directamente.
Agrega casos de uso cuando las pruebas necesitan puntos de unión: Extrae casos de uso signIn, placeOrder cuando los hooks mezclan IO, reglas de ramificación y estado de UI - no para cada alternancia de botón.
Devuelve uniones discriminadas desde casos de uso: { ok: false, error: "network" } vence a errores lanzados a través de límites de capas - los llamadores manejan fallos explícitamente.
Conecta dependencias en la raíz de composición: AppServicesProvider en app/_layout.tsx vincula adaptadores de producción - evita singletons de alcance de módulo.
Prefiere inyección de factory sobre marcos DI: createX(deps) más contexto React cubre necesidades móviles - omite tsyringe/Inversify a menos que la organización lo exija.
Por defecto TanStack Query para estado del servidor: Listas, detalles y mutaciones pertenecen al caché de Query - no Redux o porciones de Zustand duplicando datos de API.
Usa Zustand para pequeño estado global del cliente: Carrito, preferencias y chrome de UI - selectores previenen tormentas de re-renderizado de listas; no para blobs JSON del servidor.
Mantén el estado de UI efímero local: El estado abierto de Sheet y el índice de acordeón permanecen en el árbol de pantalla hasta que una segunda ruta no relacionada genuinamente los necesite.
Coloca el estado de URL en parámetros de Expo Router: Filtros y pestañas vía useLocalSearchParams - enlaces profundos compartibles vencen claves de almacén global.
Documenta la elección de navegación en un ADR: Las aplicaciones SDK 57 greenfield por defecto usan Expo Router; React Navigation brownfield sigue siendo válido - registra la decisión para la incorporación.
Mapea capas FSD pragmáticamente: app/, features/, entities/, shared/ - omite widgets/ y pages/ hasta que un bloque compuesto se repita a través de rutas.
Aplica límites con ESLint: no-restricted-imports bloqueando @/features/*/components/* - las convenciones de carpeta sola fallan en 10+ características.
Monolito modular antes de multi-app: Un repo con APP_VARIANT y banderas de características hasta que ID de paquete, cumplimiento o cadencia de lanzamiento verdaderamente diverjan.
Separa canales EAS Update por variante: production-consumer vs production-business - el canal incorrecto actualiza el listado de la tienda incorrecta.
Centraliza la configuración en getAppConfig(): Lee Constants.expoConfig?.extra una vez - las características no dispersan process.env y ramas __DEV__.
Orquesta flujos de características cruzadas en rutas: Pasa callbacks onAddToCart desde archivos de ruta - las características no importan almacenes de características hermanas.
Ejecuta la lista de verificación de refactorización antes de RC: Audita los cinco archivos principales por recuento de líneas y dispersión de importación - los módulos dios bloquean PRs paralelos y actualizaciones de SDK.
Extrae incrementalmente, un límite por PR: Mueve un hook o componente por fusión - abandona ramas de "limpieza" de múltiples semanas que divergen de main.
Adapta la inversión arquitectónica al riesgo: Autenticación, pagos y sincronización sin conexión ganan puertos y casos de uso - MVPs de tres pantallas ganan hooks y un módulo de API hasta que la complejidad pruebe lo contrario.
Cuando necesitas IO intercambiable (mock/staging/prod), pruebas unitarias de cumplimiento en reglas de negocio o múltiples adaptadores por característica - no desde el primer día de una aplicación CRUD.
Predeterminado para aplicaciones greenfield. React Navigation brownfield permanece soportado - migra cuando el dolor de enlace profundo excede el costo de migración.
Más de Query + un almacén de cliente (Zustand o Context) justifica una auditoría. Los datos del servidor no deberían vivir en almacenes de cliente.
Versiones de 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: 19 jul 2026