Lo que construir Pagelyze me enseñó sobre React
Construir Pagelyze cambió mi perspectiva sobre React. Dejé de centrarme en la teoría y empecé a centrarme en la arquitectura de producto.
Pagelyze es una herramienta de auditoría de sitios web. No es una pequeña aplicación de práctica. Gestiona informes de auditoría, lógica de puntuación y paneles de control. Debido a esto, tuve que responder a una pregunta:
¿Se mantendrá limpio este código a medida que el producto crezca?
Los hooks como useState o useEffect son importantes. Pero no lo son todo. Puedes usar sintaxis moderna y aun así tener un desastre que mantener. El problema suele ser la responsabilidad.
En una configuración deficiente, un solo archivo se encarga de todo, desde la carga de datos hasta la visualización de resultados. Esto falla a medida que escalas.
Una mejor forma es dividir los componentes por propósito:
- AuditSummary
- LeadCheckPanel
- EvidenceList
- ServiceRecommendationCard
- ReportActions
Cada pieza tiene un solo trabajo. Puedes cambiar el diseño de una tarjeta sin romper tu lógica de datos.
Deja de preguntarte si deberías usar Redux o Context. Pregúntate quién necesita el estado.
- Estado de la UI local: pestañas y modales
- Estado de formularios: URLs y validación
- Estado del servidor: informes y escaneos
- Estado global: perfil de usuario y permisos
Los custom hooks deben representar un comportamiento. No deben limitarse a mover código desordenado a un archivo diferente. Un buen hook obtiene los datos para que el componente de la página solo coordine la pantalla.
Estructura tus carpetas por funcionalidad:
- features/audit-report/
- features/lead-rescue/
- features/dashboard/
El enrutamiento es más que simples URLs. Es el recorrido del usuario. Un usuario pasa de una landing page a una auditoría gratuita, luego a un informe y, finalmente, a una consulta de servicio. Un buen enrutamiento lo guía hacia el siguiente paso.
Construye con claridad. Encuentra el cuello de botella. Corrige esa parte específica.
Las mejores prácticas de React consisten en tomar decisiones. Tú decides de qué es dueño un componente. Tú decides dónde reside el estado. Tú decides si una ruta ayuda al usuario.
Pagelyze es mi prueba. No estoy probando si puedo construir una pantalla. Estoy probando si puedo mantener un producto limpio a medida que crece.
Fuente: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb