Stimuler les performances de l'application React est cruciale pour une expérience utilisateur positive. Cet article décrit sept modèles de performance éprouvés glanés d'optimiser de nombreuses applications de réaction de production.

1. Mémuisation avec useMemo et usecallback :

Problème: Re-Rendeurs inutiles en raison d'accessoires ou d'états inchangés.

Solution: Cache Operations et références de fonctions coûteuses en calcul.

const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return ;
};

Best Practices: Utilisez avec react.memo pour les composants enfants pour éviter les mises à jour inutiles de sous-arbre. Idéal pour les calculs complexes (tri, filtrage), les rappels transmis aux enfants optimisés et aux valeurs stables du fournisseur de contexte.

2. chargement paresseux et division du code:

Problème: grande taille initiale du bundle impactant la première peinture contente (fcp).

Solution: Imports dynamiques et suspense pour le chargement à la demande.

const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  }>
    {showCharts && }
  
);

Advanced: intégrer avec le routeur React pour la fractionnement du code basé sur des itinéraires.

3. listes virtualisées pour les grands ensembles de données:

Problème: Rendre des milliers d'éléments submerge le dom.

solution: react-window ne rend que les éléments visibles.

import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  
    {({ index, style }) => (
      
...
    )}
  
);

bonus: utiliser variablesizelist pour les hauteurs de ligne dynamiques et react-virtualized-auto-sizer pour les conteneurs réactifs.

4. Management d'état efficace:

Problème: Mises à jour d'état multiples provoquant des rediffeurs en cascade.

Solution: Lecteur de lot automatique de React 18.

react 18:

setCount(1);
setText('Updated'); // Single re-render

pré-réact 18 ou pour des scénarios complexes: utilisez userReducer pour les mises à jour d'état atomique.

5. Debouncing API appelle:

Problème: Demandes d'API excessives à partir de l'entrée utilisateur rapide (par exemple, barres de recherche).

solution: a personnalisé usedebounce crochet.

import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};

pro tips: combine avec abortController pour annuler les demandes en attente.

6. API de contexte optimisé:

Problème: Re-Rendeurs inutiles des consommateurs de contexte en raison de changements non liés.

solution: diviser les contextes et mémoriser les valeurs du fournisseur.

7. Mises à jour d'UI optimistes:

Problème: Ui lent en attendant les réponses API.

Solution: Fournir des commentaires visuels immédiats et un retour sur l'erreur.

Liste de contrôle des performances:

1. Re-Rendeurs de profil avec React Devtools Profiler.
2. Analyser la taille du bundle avec Source-Map-Explorer.
3. Testez avec l'onglet Performance de Chrome (étranglement du processeur).
4. utilisez react.memo , useMemo , usecallback stratégiquement.
5. Implémentez le chargement incrémentiel.
6. Optimiser les images / médias avec le chargement paresseux.
7. Considérons le rendu côté serveur pour le contenu critique.

Rappelez-vous: Profil d'abord, optimisez la seconde! Ces techniques sont applicables sur divers cadres React (next.js, gatsby, etc.).