react-best-practices

name: react-best-practices description: Recommandations d'optimisation de performance React et Next.js de Vercel Engineering. Cette skill doit être utilisée lors de la rédaction, la révision ou la refonte de code React/Next.js pour garantir des patterns de performance optimaux. Se déclenche sur les tâches impliquant des composants React, des pages Next.js, la récupération de données, l'optimisation du bundle, ou les améliorations de performance. license: MIT tags: [gsd-2, skills, react-best-practices, writing, performance, react] metadata: author: vercel version: "1.0.0" -------|----------|--------|--------| | 1 | Élimination des Waterfalls | CRITICAL | async- | | 2 | Optimisation de la taille du Bundle | CRITICAL | bundle- | | 3 | Performance côté serveur | HIGH | server- | | 4 | Récupération de données côté client | MEDIUM-HIGH | client- | | 5 | Optimisation des Re-renders | MEDIUM | rerender- | | 6 | Performance du Rendu | MEDIUM | rendering- | | 7 | Performance JavaScript | LOW-MEDIUM | js- | | 8 | Patterns Avancés | LOW | advanced- |

Référence rapide

1. Élimination des Waterfalls (CRITICAL)

• async-defer-await - Déplacer await dans les branches où il est réellement utilisé
• async-parallel - Utiliser Promise.all() pour les opérations indépendantes
• async-dependencies - Utiliser better-all pour les dépendances partielles
• async-api-routes - Démarrer les promesses tôt, await tard dans les API routes
• async-suspense-boundaries - Utiliser Suspense pour streamer le contenu

2. Optimisation de la taille du Bundle (CRITICAL)

• bundle-barrel-imports - Importer directement, éviter les barrel files
• bundle-dynamic-imports - Utiliser next/dynamic pour les composants lourds
• bundle-defer-third-party - Charger analytics/logging après l'hydratation
• bundle-conditional - Charger les modules uniquement quand la feature est activée
• bundle-preload - Précharger au survol/focus pour la vitesse perçue

3. Performance côté serveur (HIGH)

• server-auth-actions - Authentifier les server actions comme les API routes
• server-cache-react - Utiliser React.cache() pour la déduplication par requête
• server-cache-lru - Utiliser le cache LRU pour le caching multi-requête
• server-dedup-props - Éviter la sérialisation dupliquée dans les props RSC
• server-serialization - Minimiser les données passées aux composants client
• server-parallel-fetching - Restructurer les composants pour paralléliser les fetches
• server-after-nonblocking - Utiliser after() pour les opérations non-bloquantes

4. Récupération de données côté client (MEDIUM-HIGH)

• client-swr-dedup - Utiliser SWR pour la déduplication automatique de requêtes
• client-event-listeners - Dédupliquer les event listeners globaux
• client-passive-event-listeners - Utiliser les listeners passifs pour le scroll
• client-localstorage-schema - Versionner et minimiser les données localStorage

5. Optimisation des Re-renders (MEDIUM)

• rerender-defer-reads - Ne pas s'abonner à l'état uniquement utilisé dans les callbacks
• rerender-memo - Extraire le travail coûteux dans les composants memoized
• rerender-memo-with-default-value - Hoister les props non-primitives par défaut
• rerender-dependencies - Utiliser les dépendances primitives dans les effects
• rerender-derived-state - S'abonner aux booléens dérivés, pas aux valeurs brutes
• rerender-derived-state-no-effect - Dériver l'état pendant le render, pas dans les effects
• rerender-functional-setstate - Utiliser functional setState pour les callbacks stables
• rerender-lazy-state-init - Passer une fonction à useState pour les valeurs coûteuses
• rerender-simple-expression-in-memo - Éviter memo pour les primitives simples
• rerender-move-effect-to-event - Mettre la logique d'interaction dans les event handlers
• rerender-transitions - Utiliser startTransition pour les mises à jour non-urgentes
• rerender-use-ref-transient-values - Utiliser les refs pour les valeurs transitoires fréquentes

6. Performance du Rendu (MEDIUM)

• rendering-animate-svg-wrapper - Animer le wrapper div, pas l'élément SVG
• rendering-content-visibility - Utiliser content-visibility pour les longues listes
• rendering-hoist-jsx - Extraire le JSX statique en dehors des composants
• rendering-svg-precision - Réduire la précision des coordonnées SVG
• rendering-hydration-no-flicker - Utiliser un script inline pour les données client-only
• rendering-hydration-suppress-warning - Supprimer les avertissements attendus
• rendering-activity - Utiliser le composant Activity pour show/hide
• rendering-conditional-render - Utiliser ternaire, pas && pour les conditionnelles
• rendering-usetransition-loading - Préférer useTransition pour l'état de chargement

7. Performance JavaScript (LOW-MEDIUM)

• js-batch-dom-css - Regrouper les changements CSS via des classes ou cssText
• js-index-maps - Construire Map pour les recherches répétées
• js-cache-property-access - Mettre en cache les propriétés d'objets dans les boucles
• js-cache-function-results - Mettre en cache les résultats de fonction dans une Map au niveau module
• js-cache-storage - Mettre en cache les lectures localStorage/sessionStorage
• js-combine-iterations - Combiner plusieurs filter/map en une seule boucle
• js-length-check-first - Vérifier la longueur du tableau avant la comparaison coûteuse
• js-early-exit - Retourner tôt des fonctions
• js-hoist-regexp - Hoister la création de RegExp en dehors des boucles
• js-min-max-loop - Utiliser une boucle pour min/max au lieu de sort
• js-set-map-lookups - Utiliser Set/Map pour les recherches O(1)
• js-tosorted-immutable - Utiliser toSorted() pour l'immuabilité

8. Patterns Avancés (LOW)

• advanced-event-handler-refs - Stocker les event handlers dans les refs
• advanced-init-once - Initialiser l'app une fois par app load
• advanced-use-latest - useLatest pour les refs de callbacks stables

Comment utiliser

Lire les fichiers de règles individuels pour des explications détaillées et des exemples de code :

rules/async-parallel.md
rules/bundle-barrel-imports.md

Chaque fichier de règle contient :

• Une brève explication de son importance
• Un exemple de code incorrect avec explication
• Un exemple de code correct avec explication
• Contexte additionnel et références

Document compilé complet

Pour le guide complet avec toutes les règles développées : AGENTS.md