12 bonnes pratiques pour les développeurs React / Blogs / Perficient

Comme un Développeur React, il est essentiel d’augmenter les performances de vos applications React pour offrir une expérience utilisateur fluide et rationalisée. Cet article couvrira les meilleures pratiques pour écrire du code dans React JS.

1. Réduire les rendus et utiliser la mémorisation

Mémorisation est une technique permettant de minimiser les calculs coûteux ou les appels de fonctions en mettant en cache leurs résultats. Il vous permet d’éviter de recalculer des calculs coûteux ou de réexécuter des appels de fonctions coûteux, augmentant ainsi l’efficacité globale de votre application React.

Dans les composants fonctionnels, nous pouvons utiliser note ou utiliserCallback pour optimiser les performances de rendu.

Exemple

import { memo } from 'react';

const HighCalculativeComponent = memo(({ data }) => {
   // Expensive computation or function call here
   return <div>{data}</div>;
});

import { useCallback } from "react"; 
const addTodo = useCallback(() => { 
  /*Logic here*/ 
},[todos]); 
return ( 
<> 
  <Todos todos={todos} addTodo={addTodo} /> 
   <hr /> 
<div> 
<Component1> 
<Component2> 
</div> 
</>
);

2. Évitez d’utiliser l’index comme clé

Lors du rendu des listes dans React, évitez d’utiliser l’index du tableau comme propriété de clé. L’utilisation de l’index comme clé peut entraîner un comportement inattendu et des performances médiocres lors de l’ajout, de la suppression ou de la réorganisation d’éléments dans une liste. Utilisez plutôt l’identification unique de vos données comme clé.

Exemple

const ListComponent = () => {
    const items = [
        { id: 1, title: "Item 1" },
        { id: 2, title: "Item 2" },
        { id: 3, title: "Item 3" }
    ];

    return (
       <ul>
        {items.map(item => (
            <li key={item.id}>{item.title}</li>
        ))}
       </ul>
    );
};

3. Utiliser des composants fonctionnels

Composants fonctionnels ont une empreinte mémoire réduite et sont plus rapides à restituer que les composants de classe. Ils encouragent également une meilleure organisation et réutilisabilité du code. Comme bonne pratique, essayez d’utiliser des composants fonctionnels autant que possible pour de meilleures performances et une meilleure maintenabilité.

Exemple

const TestComponent = ({ data }) => {
    return <div>{data}</div>;
};

4. Utilisez React.Fragment

Réagir.Fragment est une meilleure option que d’envelopper de nombreux éléments dans un supplément div élément lors de leur présentation sans avoir besoin d’un élément conteneur séparé. Réduire le nombre de DOMAINE nœuds grâce à l’utilisation de Réagir.Fragment améliore l’efficacité du rendu.

Exemple

<React.Fragment>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
</React.Fragment>

5. Réduisez les accessoires inutiles

Réduire rendus inutiles, transmettez uniquement à vos composants les accessoires réellement nécessaires. Lorsque vous n’avez besoin que d’un petit nombre de propriétés d’un objet, ne fournissez pas d’objets énormes ou en constante évolution comme accessoires. Vous pouvez obtenir de meilleurs résultats avec vos composants React en réduisant les propriétés inutiles.

Exemple

const TestComponent = ({ name }) => {
    return <div>{name}</div>;
};

6. Mises à jour de l’état des lots

Utiliser Réagissez aux mises à jour par lots pour maximiser l’efficacité lors du changement d’état des composants. Plusieurs mises à jour d’état peuvent entraîner des rendus inutiles, qui peuvent être évités en les encapsulant dans un seul appel de fonction ou en utilisant l’option utiliserEffet crochet.

Exemple

const TestComponent = () => {
   const [count, setCount] = useState(0);
   const handleClick = () => {
       setCount(count + 1); // Not ideal, causes unnecessary re-render
       setCount(count + 1); // Not ideal, causes unnecessary re-render
       // Ideal usage, only triggers a single re-render
       setCount((prevCount) => prevCount + 2);
   };

   return (
      <div>
        <p>Count: {count}</p>
        <button onClick={handleClick}>Increment Count</button>
      </div>
   );
};

7. Évitez les fonctions en ligne

Lorsque vous envoyez des instances de fonction comme accessoires, en particulier, essayez d’éviter d’en créer de nouvelles dans vos méthodes de rendu. Étant donné que les fonctions en ligne génèrent des références distinctes pour chaque rendu, elles peuvent entraîner des rendus inutiles. Pour éviter les rendus inutiles, définissez des fonctions en dehors de la méthode de rendu et transmettez-les plutôt en tant que références stables.

Exemple

const MyComponent = ({ onClick }) => {
   const handleClick = useCallback(() => {
                            onClick();
                       }, [onClick]);
   return <button onClick={handleClick}>Click Me</button>;
};

8. Utilisez le fractionnement de code et le chargement paresseux

Divisez votre application React en segments gérables avec fractionnement de code et chargez uniquement les sections nécessaires selon vos besoins. En chargeant des composants ou des routes de manière asynchrone, vous pouvez diminuer la taille globale du bundle et accélérer le temps de chargement initial.

Exemple

const LazyComponent = React.lazy(() => import('./LazyComponent'));
const MyComponent = () => {
    return (
       <React.Suspense fallback={<div>Loading...</div>}>
       <LazyComponent />
       </React.Suspense>
    );
};

9. Optimiser les requêtes réseau

Améliorer l’efficacité en réduire le nombre de requêtes réseau votre application React envoie. Combinez les requêtes en utilisant traitement par lots ou pagination en une seule demande et utiliser compression et mise en cache pour économiser la charge du serveur et améliorer les temps de réponse.

10. Utilisez la virtualisation pour gérer de grandes listes

Implémentez des techniques de virtualisation telles que fenêtrage ou défilement infini pour le rendu de longues listes dans React. La virtualisation améliore l’efficacité du rendu et réduit l’utilisation de la mémoire en rendre uniquement les éléments visibles.

11. Réduire et mettre en cache les fichiers statiques

Optimiser les performances du site Web en compression et mise en cache des actifs statiques tels que les fichiers CSS, images et JavaScript. Fournissez efficacement des actifs statiques pour fournir aux utilisateurs un expérience plus rapide.

12. Différer les opérations coûteuses dans useEffect

Utilisez le utiliserEffet crochet pour différer des opérations coûteuses qui pas besoin d’être synchrone à l’image de rendu suivante. En retardant des opérations coûteuses, vous risquez éviter de bloquer le thread principal et augmentez la réactivité globale de votre application React.

Exemple

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

const MyComponent = () => {
   return (
      <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
      </React.Suspense>
   );
};

Conclusion

La mise en œuvre de ces bonnes pratiques garantit que vos composants seront restitués uniquement lorsque cela est nécessaire, ce qui se traduira par une expérience utilisateur plus transparente et améliorera considérablement les performances de vos applications React.