Vercel publie un dépôt de bonnes pratiques React

• Vercel a publié un dépôt structuré, React-Best-Practices, fondé sur plus de 10 ans d’expérience en optimisation des performances sur React et Next.js
• Ce dépôt est conçu pour permettre aux agents IA et aux LLM de prendre des décisions d’optimisation cohérentes lors des revues de code ou des refactorings
• L’idée centrale est de donner la priorité à l’élimination des waterfalls et à la réduction de la taille des bundles, avec 8 catégories couvrant aussi les performances serveur, client et de rendu
• Chaque règle inclut un niveau d’importance (CRITICAL~LOW) ainsi que des exemples de code incorrect et de correction
• Ces règles, validées sur des cas réels en production, permettent la prise en charge de l’optimisation automatique via l’intégration avec des agents de codage

---

Vue d’ensemble de React Best Practices

• react-best-practices est un dépôt qui concentre plus de 10 ans de connaissances accumulées en optimisation sur React et Next.js
  • Il est structuré pour que les agents IA et les LLM puissent s’y référer lors de l’analyse du code et de la formulation de propositions d’amélioration
• Les problèmes de performance React apparaissent souvent sous la forme de ralentissements constatés après la mise en production
  • Parmi les causes principales figurent l’exécution séquentielle de tâches asynchrones, l’augmentation de la taille des bundles côté client et les rerender inutiles
• Ces problèmes agissent comme des goulots d’étranglement structurels qui imposent un coût répété à chaque session utilisateur

Idée clé : une optimisation guidée par les priorités

• De nombreuses tentatives d’amélioration des performances échouent parce qu’elles commencent au niveau le plus bas de la stack
  • Par exemple, si un waterfall de requêtes ajoute 600 ms, une optimisation avec useMemo n’a pratiquement aucun sens
  • Si chaque page envoie 300 KB de JavaScript inutile, de micro-optimisations de boucle n’auront aucun effet notable
• Le framework commence par deux actions essentielles
  1. éliminer les waterfalls
  2. réduire la taille des bundles
• Ensuite, l’approche s’étend aux performances serveur, au data fetching côté client et à l’optimisation des rerenders
• On y trouve au total 8 catégories et plus de 40 règles, classées par ordre d’importance
  • Le niveau CRITICAL couvre l’élimination des waterfalls et la réduction des bundles, tandis que le niveau LOW concerne des patterns avancés

Principales catégories incluses

• Le dépôt couvre les 8 domaines de performance suivants
  • élimination des waterfalls asynchrones
  • optimisation de la taille des bundles
  • performances serveur
  • data fetching côté client
  • optimisation des rerenders
  • performances de rendu
  • patterns avancés
  • performances JavaScript
• Chaque règle fournit un niveau d’impact (CRITICAL~LOW) ainsi que des exemples de code incorrect et de version corrigée
  • Exemple : un code qui attend les données dans toutes les branches à cause d’appels await inutiles → correction en réorganisant les conditions pour n’attendre que lorsque c’est nécessaire
• Tous les fichiers de règles sont compilés dans AGENTS.md, ce qui permet aux agents IA de s’y référer directement lors des revues de code

Des règles tirées de cas réels

• Toutes les règles s’appuient sur des expériences concrètes d’amélioration des performances dans des codebases de production
  • fusion de boucles : un code qui parcourait une liste de messages 8 fois a été réduit à un seul passage, améliorant l’efficacité sur de gros volumes de données
  • parallélisation asynchrone : des appels DB sans dépendance ont été exécutés en parallèle, réduisant de moitié le temps d’attente total
  • ajustement du fallback des polices : avec une police système, l’espacement des lettres a été ajusté pour conserver un affichage naturel même en mode fallback

Intégration avec les agents de codage

• react-best-practices est proposé sous forme de package Agent Skills, installable dans divers agents de codage
  • Utilisable avec Opencode, Codex, Claude Code, Cursor, etc.
• Si un agent détecte des appels useEffect imbriqués ou des imports client lourds, il peut consulter les règles correspondantes pour proposer une correction
• Commande d’installation :
  npx add-skill vercel-labs/agent-skills
• Le dépôt complet est disponible sur GitHub : react-best-practices