Arquitectura de Estado: Organización Escalable

Arquitectura de estado: organización escalable

La arquitectura de estado define dónde vive cada dato y quién puede modificarlo. En aplicaciones React medianas, muchos problemas aparecen porque todo se vuelve estado global o porque cada pantalla duplica datos.

Tipos de estado

• Estado local: input abierto, modal visible, tab activa.


• Estado compartido: usuario, tema, filtros que afectan varias secciones.


• Estado servidor: datos que vienen de APIs y necesitan cache, revalidación o loading.


• Estado URL: búsqueda, paginación, filtros compartibles.

Decisiones sanas

• Mantené el estado lo más cerca posible de donde se usa.


• No conviertas estado servidor en estado global manual si una librería de datos lo resuelve mejor.


• Usá URL para filtros que el usuario debería compartir o recargar.


• Separá acciones de UI de reglas de negocio cuando crezcan.

Actividad: mapa de estado

Elegí una pantalla real, como dashboard, checkout o perfil. Listá cada dato visible y clasificalo como local, compartido, servidor o URL.

Entregable

• Tabla con datos y tipo de estado.


• Decisión de dónde viviría cada estado.


• Un riesgo de sobreingeniería que evitarías.