Vercel React Best Practices

Guide complet d'optimisation des performances pour les applications React et Next.js, maintenu par Vercel. Contient 57 règles réparties dans 8 catégories, priorisées par impact pour guider la refonte automatisée et la génération de code.

Déclencheurs

• react
• component
• hook
• useState
• useEffect
• jsx
• tsx
• react performance
• memo
• useMemo
• useCallback
• react render
• virtual dom
• react app

Quand appliquer

Référencez ces directives quand :

• Vous écrivez de nouveaux composants React ou pages Next.js
• Vous implémentez la récupération de données (côté client ou serveur)
• Vous passez en revue le code pour les problèmes de performance
• Vous refactorisez du code React/Next.js existant
• Vous optimisez la taille du bundle ou les temps de chargement

Catégories de règles par priorité

Référence rapide

1. Élimination des Waterfalls (CRITIQUE)

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

2. Optimisation de la taille du Bundle (CRITIQUE)

• bundle-barrel-imports - Importez directement, évitez les fichiers barrel
• bundle-dynamic-imports - Utilisez next/dynamic pour les composants lourds
• bundle-defer-third-party - Chargez les analytics/logs après l'hydratation
• bundle-conditional - Chargez les modules seulement quand la fonctionnalité est activée
• bundle-preload - Préchargez au survol/focus pour la vitesse perçue

3. Performance côté Serveur (ÉLEVÉE)

• server-auth-actions - Authentifiez les server actions comme les API routes
• server-cache-react - Utilisez React.cache() pour la déduplication par requête
• server-cache-lru - Utilisez le cache LRU pour le caching entre requêtes
• server-dedup-props - Évitez la sérialisation dupliquée dans les props RSC
• server-serialization - Minimisez les données transmises aux composants client
• server-parallel-fetching - Restructurez les composants pour paralléliser les récupérations
• server-after-nonblocking - Utilisez after() pour les opérations non-bloquantes

4. Récupération de données côté Client (MOYEN-ÉLEVÉ)

• client-swr-dedup - Utilisez SWR pour la déduplication automatique des requêtes
• client-event-listeners - Déduplicapez les écouteurs d'événements globaux
• client-passive-event-listeners - Utilisez les écouteurs passifs pour le scroll
• client-localstorage-schema - Versionnez et minimisez les données localStorage

5. Optimisation des Re-rendus (MOYEN)

• rerender-defer-reads - Ne vous abonnez pas à l'état utilisé seulement dans les callbacks
• rerender-memo - Extrayez le travail coûteux dans des composants mémoïsés
• rerender-memo-with-default-value - Remontez les props par défaut non-primitives
• rerender-dependencies - Utilisez les dépendances primitives dans les effects
• rerender-derived-state - Abonnez-vous aux booléens dérivés, pas aux valeurs brutes
• rerender-derived-state-no-effect - Dérivez l'état pendant le rendu, pas dans les effects
• rerender-functional-setstate - Utilisez functional setState pour les callbacks stables
• rerender-lazy-state-init - Passez une fonction à useState pour les valeurs coûteuses
• rerender-simple-expression-in-memo - Évitez memo pour les primitives simples
• rerender-move-effect-to-event - Mettez la logique d'interaction dans les gestionnaires d'événements
• rerender-transitions - Utilisez startTransition pour les mises à jour non-urgentes
• rerender-use-ref-transient-values - Utilisez les refs pour les valeurs fréquentes temporaires

6. Performance du Rendu (MOYEN)

• rendering-animate-svg-wrapper - Animez le wrapper div, pas l'élément SVG
• rendering-content-visibility - Utilisez content-visibility pour les longues listes
• rendering-hoist-jsx - Extrayez le JSX statique en dehors des composants
• rendering-svg-precision - Réduisez la précision des coordonnées SVG
• rendering-hydration-no-flicker - Utilisez un script inline pour les données client-only
• rendering-hydration-suppress-warning - Supprimez les avertissements sur les désaccords attendus
• rendering-activity - Utilisez le composant Activity pour afficher/masquer
• rendering-conditional-render - Utilisez l'opérateur ternaire, pas && pour les conditionnelles
• rendering-usetransition-loading - Préférez useTransition pour l'état de chargement

7. Performance JavaScript (BAS-MOYEN)

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

8. Modèles Avancés (BAS)

• advanced-event-handler-refs - Stockez les gestionnaires d'événements dans les refs
• advanced-init-once - Initialisez l'app une fois par chargement
• advanced-use-latest - useLatest pour les refs de callback stables

Comment utiliser

Lisez les fichiers de règles individuels pour les explications détaillées et les 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
• Un contexte supplémentaire et des références

Document complet compilé

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

Vérifier

• Le changement a été rendu dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturé, pas seulement examiné en relecture de code
• La mise en page a été vérifiée aux points de rupture que le guide react-best-practices signale (mobile + desktop minimum) ; des preuves de chacun sont jointes
• Les valeurs de couleur, typographie et espacement utilisées proviennent des design tokens/thème du projet, pas de valeurs ad-hoc codées en dur
• La navigation au clavier et l'ordre de focus ont été exercés sur chaque élément interactif introduit
• Les variantes reduced-motion / dark-mode (quand supportées) ont été vérifiées, pas supposées hériter
• Aucune erreur de console ou avertissement d'hydratation n'a été émis durant le rendu de vérification