Bonnes pratiques React Vercel

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

Quand appliquer

Référencez ces directives lors de :

• L'écriture de nouveaux composants React ou pages Next.js
• L'implémentation du fetching de données (côté client ou serveur)
• La révision du code pour détecter les problèmes de performance
• La refactorisation du code React/Next.js existant
• L'optimisation de la taille du bundle ou des temps de chargement

Catégories de règles par priorité

Référence rapide

1. Élimination des cascades (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, await 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 barrel files
• bundle-dynamic-imports - Utilisez next/dynamic pour les composants lourds
• bundle-defer-third-party - Chargez l'analytics/logging 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 (HAUTE)

• 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 LRU cache pour la mise en cache inter-requête
• server-dedup-props - Évitez la sérialisation dupliquée dans les props RSC
• server-hoist-static-io - Remontez les I/O statiques (fonts, logos) au niveau du module
• server-serialization - Minimisez les données passées aux composants client
• server-parallel-fetching - Restructurez les composants pour paralléliser les fetches
• server-after-nonblocking - Utilisez after() pour les opérations non-bloquantes

4. Fetching de données côté client (MOYEN-HAUT)

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

5. Optimisation du re-render (MOYEN)

• rerender-defer-reads - N'abonnez-vous pas à l'état seulement utilisé dans les callbacks
• rerender-memo - Extrayez le travail coûteux dans les composants mémoïsés
• rerender-memo-with-default-value - Remontez les props non-primitives par défaut
• rerender-dependencies - Utilisez des 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 setState fonctionnel 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 event handlers
• rerender-transitions - Utilisez startTransition pour les updates non-urgentes
• rerender-use-ref-transient-values - Utilisez les refs pour les valeurs transientes fréquentes
• rerender-no-inline-components - Ne définissez pas les composants à l'intérieur de composants

6. Performance du rendu (MOYEN)

• rendering-animate-svg-wrapper - Animez le div wrapper, 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 incompatibilités attendues
• rendering-activity - Utilisez le composant Activity pour show/hide
• rendering-conditional-render - Utilisez ternaire, pas && pour les conditionnelles
• rendering-usetransition-loading - Préférez useTransition pour l'état de chargement
• rendering-resource-hints - Utilisez les resource hints React DOM pour le préchargement
• rendering-script-defer-async - Utilisez defer ou async sur les script tags

7. Performance JavaScript (BAS-MOYEN)

• js-batch-dom-css - Groupez 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 des fonctions 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 la comparaison coûteuse
• js-early-exit - Retournez tôt depuis les fonctions
• js-hoist-regexp - Remontez la création de 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 en O(1)
• js-tosorted-immutable - Utilisez toSorted() pour l'immuabilité
• js-flatmap-filter - Utilisez flatMap pour mapper et filtrer en une seule passe

8. Patterns avancés (BAS)

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

Comment utiliser

Lisez 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
• Un contexte supplémentaire et des références

Document compilé complet

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