React Meilleures Pratiques

Que fait React Meilleures Pratiques ?

Guide complet d'optimisation des performances pour les applications React. Contient 37 règles réparties en 7 catégories, classées par impact.

Catégories de règles par priorité

Priorité	Catégorie	Impact	Préfixe
1	Élimination des cascades	CRITIQUE	async-
2	Optimisation de la taille du bundle	CRITIQUE	bundle-
3	Récupération de données côté client	MOYEN-HAUT	client-
4	Optimisation des re-rendus	MOYEN	rerender-
5	Performances de rendu	MOYEN	rendering-
6	Performances JavaScript	FAIBLE-MOYEN	js-
7	Patrons avancés	FAIBLE	advanced-

Référence rapide

1. Élimination des cascades (CRITIQUE)

• async-defer-await - Déplacer await dans les branches où il est réellement utilisé
• async-parallel - Utiliser Promise.all()/allSettled() pour les opérations indépendantes

2. Optimisation de la taille du bundle (CRITIQUE)

• bundle-dynamic-imports - React.lazy() pour les composants lourds
• bundle-defer-third-party - Charger les analyses/consignation à la demande
• bundle-conditional - Charger les modules uniquement lorsque la fonctionnalité est activée
• bundle-preload - Précharger au survol/focus pour une vitesse perçue

3. Récupération de données côté client (MOYEN-HAUT)

• client-query-dedup - Utiliser TanStack Query 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 les performances de défilement
• client-localstorage-schema - Versionner et minimiser les données dans localStorage

4. Optimisation des re-rendus (MOYEN)

• rerender-defer-reads - Ne pas s'abonner à un état utilisé uniquement dans les callbacks
• rerender-memo - Extraire les tâches coûteuses dans des composants mémorisés
• rerender-dependencies - Utiliser des dépendances primitives dans les effets
• rerender-derived-state - S'abonner à des booléens dérivés, pas à des valeurs brutes
• rerender-functional-setstate - Utiliser setState fonctionnel pour les callbacks stables
• rerender-lazy-state-init - Passer une fonction à useState pour les valeurs coûteuses
• rerender-transitions - Utiliser startTransition pour les mises à jour non urgentes

5. Performances de rendu (MOYEN)

• rendering-animate-svg-wrapper - Animer un div wrapper, 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-activity - Utiliser le composant Activity pour afficher/masquer
• rendering-conditional-render - Utiliser ternaire, pas && pour les conditionnels

6. Performances JavaScript (FAIBLE-MOYEN)

• js-batch-dom-css - Regrouper les modifications CSS via les 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'objets dans les boucles
• js-cache-function-results - Mettre en cache les résultats de fonctions 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 une comparaison coûteuse
• js-early-exit - Retourner tôt des fonctions
• js-hoist-regexp - Élever 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 O(1)
• js-tosorted-immutable - Utiliser toSorted() pour l'immuabilité

7. Patrons avancés (FAIBLE)

• advanced-event-handler-refs - Stocker les gestionnaires d'événements dans des refs
• advanced-use-latest - useLatest pour des refs de callback stables

Comment utiliser

Chaque fichier de règle dans references/ contient : explication, exemples de code incorrect/correct, et contexte. Lisez les fichiers individuels selon les besoins.