Ce que la création de Pagelyze m'a appris sur React

La création de Pagelyze a changé ma vision de React. J'ai cessé de me concentrer sur la théorie pour m'intéresser à l'architecture produit.

Pagelyze est un outil d'audit de sites web. Ce n'est pas une petite application d'exercice. Il gère des rapports d'audit, une logique de notation et des tableaux de bord. Pour cette raison, j'ai dû répondre à une question :

Ce code restera-t-il propre à mesure que le produit grandit ?

Les hooks comme useState ou useEffect sont importants. Mais ils ne font pas tout. On peut utiliser une syntaxe moderne et avoir quand même un désordre à maintenir. Le problème réside généralement dans la responsabilité.

Dans une mauvaise configuration, un seul fichier gère tout, du chargement des données à l'affichage des résultats. Cela ne fonctionne plus dès que l'on passe à l'échelle.

Une meilleure approche consiste à diviser les composants par fonction :

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Chaque élément a une seule mission. Vous pouvez modifier le design d'une carte sans casser votre logique de données.

Arrêtez de vous demander s'il faut utiliser Redux ou Context. Demandez-vous plutôt qui a besoin de l'état (state).

  • État UI local : onglets et modales
  • État de formulaire : URLs et validation
  • État serveur : rapports et scans
  • État global : profil utilisateur et permissions

Les hooks personnalisés doivent représenter un comportement. Ils ne doivent pas simplement déplacer du code désordonné dans un autre fichier. Un bon hook récupère les données afin que le composant de page ne fasse que coordonner l'affichage.

Structurez vos dossiers par fonctionnalité :

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

Le routage est bien plus que de simples URLs. C'est le parcours utilisateur. Un utilisateur passe d'une page d'accueil à un audit gratuit, puis à un rapport, et enfin à une demande de service. Un bon routage le guide vers l'étape suivante.

Construisez avec clarté. Identifiez le goulot d'étranglement. Corrigez cette partie spécifique.

Les bonnes pratiques React reposent sur des décisions. Vous décidez de ce qu'un composant possède. Vous décidez où l'état réside. Vous décidez si une route aide l'utilisateur.

Pagelyze est mon test. Je ne teste pas ma capacité à construire un écran. Je teste ma capacité à maintenir un produit propre à mesure qu'il grandit.

Source : https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb