Lección 8 de 12 · Lectura y práctica
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.
Del concepto a la práctica
Taller de esta lección
Clasificar el estado antes de elegir una herramienta evita convertir datos temporales en dependencias globales. En una pantalla de pedidos, la pestaña activa pertenece a la interfaz, el usuario autenticado es compartido, los pedidos vienen del servidor y el filtro que se desea compartir puede vivir en la URL.
Ejemplo resuelto
| Dato | Tipo | Propietario |
|---|---|---|
| tab activa | local | OrdersPanel |
| usuario | compartido | AuthProvider |
| pedidos | servidor | repositorio |
| estado del filtro | URL | router |
La decisión concreta es no guardar tab en Context ni duplicar pedidos en otro estado.
Pruébalo
Lista cuatro datos visibles de una pantalla.
Asigna uno de los cuatro tipos anteriores a cada dato.
Escribe quién puede modificarlo y por qué.
Comprueba tu resultado
Error frecuente: llamar “global” a todo lo que usan dos componentes. Corrígelo preguntando si realmente debe sobrevivir a cambios de ruta o ser compartible.
Ejercicio: añade paginación compartible; el resultado esperado es clasificarla como URL y definir una clave determinista, por ejemplo page=2.
Mapa de prácticaUna condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.
Ver la infografía en tamaño completo ↗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.
Sigue con React Intermedio: Patrones y Optimización
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.