Meilleures Pratiques React Vercel

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

Quand appliquer

Consultez 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 examinez le code pour identifier 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 cascades (CRITIQUE)

• async-cheap-condition-before-await - Vérifier les conditions sync bon marché avant d'attendre les flags ou valeurs distantes
• 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 - Commencer les promesses tôt, attendre tard dans les routes API
• async-suspense-boundaries - Utiliser Suspense pour diffuser le contenu en streaming

2. Optimisation de la taille du bundle (CRITIQUE)

• bundle-barrel-imports - Importer directement, éviter les fichiers barrel
• bundle-analyzable-paths - Préférer les chemins d'importation et de système de fichiers statiquement analysables pour éviter les bundles et traces larges
• bundle-dynamic-imports - Utiliser next/dynamic pour les composants lourds
• bundle-defer-third-party - Charger l'analytique/logging après l'hydratation
• bundle-conditional - Charger les modules uniquement quand la fonctionnalité est activée
• bundle-preload - Précharger au survol/focus pour la vitesse perçue

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

• server-auth-actions - Authentifier les Server Actions comme les routes API
• server-cache-react - Utiliser React.cache() pour la déduplication par requête
• server-cache-lru - Utiliser le cache LRU pour la mise en cache inter-requêtes
• server-dedup-props - Éviter la sérialisation dupliquée dans les props RSC
• server-hoist-static-io - Placer l'I/O statique (fonts, logos) au niveau du module
• server-no-shared-module-state - Éviter l'état mutable au niveau du module dans RSC/SSR
• server-serialization - Minimiser les données passées aux composants client
• server-parallel-fetching - Restructurer les composants pour paralléliser les récupérations
• server-parallel-nested-fetching - Chaîner les récupérations imbriquées par élément dans Promise.all
• server-after-nonblocking - Utiliser after() pour les opérations non-bloquantes

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

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

5. Optimisation du rendu (MOYEN)

• rerender-defer-reads - Ne pas s'abonner à un état utilisé uniquement dans les callbacks
• rerender-memo - Extraire le travail coûteux dans des composants mémoïzés
• rerender-memo-with-default-value - Placer les props non-primitives par défaut au niveau supérieur
• rerender-dependencies - Utiliser les dépendances primitives dans les effets
• rerender-derived-state - S'abonner aux booléens dérivés, pas aux valeurs brutes
• rerender-derived-state-no-effect - Dériver l'état lors du rendu, pas dans les effets
• rerender-functional-setstate - Utiliser setState fonctionnel 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-split-combined-hooks - Diviser les hooks avec des dépendances indépendantes
• rerender-move-effect-to-event - Mettre la logique d'interaction dans les gestionnaires d'événements
• rerender-transitions - Utiliser startTransition pour les mises à jour non-urgentes
• rerender-use-deferred-value - Différer les rendus coûteux pour garder l'entrée réactive
• rerender-use-ref-transient-values - Utiliser refs pour les valeurs transitoires fréquentes
• rerender-no-inline-components - Ne pas définir de composants à l'intérieur de composants

6. Performance du rendu (MOYEN)

• 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 incompatibilités attendues
• rendering-activity - Utiliser le composant Activity pour montrer/cacher
• rendering-conditional-render - Utiliser ternaire, pas && pour les conditionnels
• rendering-usetransition-loading - Préférer useTransition pour l'état de chargement
• rendering-resource-hints - Utiliser les hints de ressources React DOM pour le préchargement
• rendering-script-defer-async - Utiliser defer ou async sur les balises script

7. Performance JavaScript (BAS-MOYEN)

• js-batch-dom-css - Grouper les changements CSS via des classes ou cssText
• js-index-maps - Construire une Map pour les recherches répétées
• js-cache-property-access - Mettre en cache les propriétés d'objet dans les boucles
• js-cache-function-results - Mettre en cache les résultats de fonction dans une Map au niveau du 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 - Placer la création 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 en O(1)
• js-tosorted-immutable - Utiliser toSorted() pour l'immuabilité
• js-flatmap-filter - Utiliser flatMap pour mapper et filtrer en une seule passe
• js-request-idle-callback - Différer le travail non-critique au temps d'inactivité du navigateur

8. Motifs avancés (BAS)

• advanced-effect-event-deps - Ne pas mettre les résultats de useEffectEvent dans les dépendances d'effet
• advanced-event-handler-refs - Stocker les gestionnaires d'événements dans des refs
• advanced-init-once - Initialiser l'app une fois par chargement d'app
• advanced-use-latest - useLatest pour les refs de callback stables

Comment utiliser

Consultez 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 pourquoi c'est important
• Un exemple de code incorrect avec explication
• Un exemple de code correct avec explication
• Du 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