Patrones de composición y arquitectura
Aprende a dividir componentes, layouts y estado compartido con criterios que escalen mejor que los atajos rápidos.
Cuando una app React crece, el principal problema no suele ser “falta una API”. Suele ser que la estructura se deteriora.
Patrones que ayudan
Contenedor y presentación
Un componente obtiene y organiza datos. Otro los pinta.
Layouts claros
Estructura compartida en un sitio. Contenido variable en otro.
Estado cerca de donde se usa
No subas todo a App por reflejo.
Props pequeñas y explícitas
Pasa lo necesario, no blobs gigantes.
Señales de deterioro
- componentes de 400 líneas
- demasiados efectos para coordinar lógica normal
- un mismo dato repetido en varios estados
- props atravesando medio árbol
- ramas de JSX imposibles de leer
Un criterio muy útil
Antes de añadir otra abstracción, intenta:
- dividir el componente
- derivar más y guardar menos
- mover el estado al sitio correcto
- extraer lógica repetida a un custom hook
Muchas veces el problema desaparece sin necesidad de otra librería.
La última lección cierra con rendimiento y errores típicos al escalar.