Optimiser le re-rendu dans React : meilleures pratiques

L'une des principales causes des goulots d'étranglement des performances dans React, en particulier dans les grandes applications, est le nouveau rendu. Le mécanisme DOM virtuel de React met à jour efficacement le DOM, mais des rendus inutiles peuvent toujours entraîner des problèmes de performances. Le re-rendu peut être optimisé pour garantir que seuls les composants qui le nécessitent sont à nouveau rendus, ce qui améliore les performances et la réactivité de l'application.

Les meilleures pratiques pour réduire les rendus inutiles dans les applications React seront abordées dans cet article, ainsi que quelques conseils et méthodes utiles pour vous aider à maximiser l'efficacité de vos composants React.

Comprendre le re-rendu dans React

Le processus de rendu de React s'articule autour de son arborescence de composants. Lorsque l'état ou les accessoires d'un composant changent, React restitue ce composant et ses composants enfants. Cependant, s'il n'est pas géré correctement, cela peut conduire à des rendus inutiles, où les composants qui n'ont subi aucun changement réel sont également restitués, gaspillant ainsi des ressources.

Causes courantes des rendus inutiles

Accessoires ou changements d'état qui n'affectent pas la sortie du composant.
Le composant parent est restitué, ce qui entraîne le nouveau rendu des composants enfants, même si leurs accessoires n'ont pas changé.
Fonctions anonymes ou références d'objets recréées à chaque rendu.

Techniques clés pour optimiser le re-rendu dans React

1. Utilisez React.memo pour les composants fonctionnels

React.memo est un composant d'ordre supérieur (HOC) qui permet d'éviter les rendus inutiles dans les composants fonctionnels en mémorisant le résultat. Si les accessoires d'un composant n'ont pas changé, React.memo l'empêche d'être restitué.

const MyComponent = React.memo(({ data }) => {
  console.log('Component rendered');
  return <div>{data}</div>;
});

Avec cette optimisation, MyComponent ne sera restitué que lorsque son accessoire de données change, améliorant ainsi les performances.

2. Optimisez les rendus avec useCallback et useMemo

?? useCallback : utilisé pour mémoriser les fonctions afin qu'elles ne soient pas recréées à chaque rendu. Ceci est utile lors de la transmission de fonctions à des composants enfants qui dépendent de valeurs spécifiques.

const handleClick = useCallback(() => {
  // handle button click
}, []);

?? useMemo : utilisé pour mémoriser des calculs coûteux ou des données dérivées afin d'éviter de recalculer à chaque rendu.

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(input);
}, [input]);

Ces hooks garantissent que ce n'est que lorsque les dépendances changent que la fonction ou la valeur sera recalculée, réduisant ainsi les rendus inutiles.

3. Évitez les fonctions en ligne et la création d'objets dans JSX

Les fonctions ou objets en ligne créés dans JSX sont une source courante de rendus. Étant donné que de nouvelles références de fonction ou d'objet sont créées à chaque rendu du composant, cela déclenche des rendus inutiles dans les composants enfants.

// Avoid this pattern
<MyChildComponent onClick={() => doSomething()} />

// Instead, define the function outside the JSX
const handleClick = () => doSomething();
<MyChildComponent onClick={handleClick} />

En évitant la création de fonctions ou d'objets en ligne dans JSX, vous évitez que les composants enfants ne soient restitués inutilement.

4. Diviser les gros composants en composants plus petits

Une autre technique pour éviter les rendus inutiles consiste à décomposer les gros composants en composants plus petits et plus ciblés. Cela permet à React d'effectuer des mises à jour plus granulaires et empêche le nouveau rendu de composants entiers lorsque seule une partie du composant a changé.

Par exemple, si vous disposez d'un composant qui affiche un formulaire et une liste, vous pouvez les diviser en deux composants distincts. De cette façon, la mise à jour du formulaire ne déclenchera pas le nouveau rendu de la liste, et vice versa.

function ParentComponent() {
  return (
    <>
      <FormComponent />
      <ListComponent />
    </>
  );
}

5. Utilisez correctement la clé Prop

Lors du rendu des listes, React utilise l'accessoire clé pour identifier les éléments. Une utilisation incorrecte de l'accessoire clé peut entraîner une mise à jour ou un rendu incorrect des composants par React.

Assurez-vous d'utiliser une clé unique et stable pour chaque élément d'une liste :

const items = ['apple', 'banana', 'orange'];
items.map((item) => <li key={item}>{item}</li>);

Évitez d'utiliser l'index comme clé lorsque les éléments peuvent être réorganisés ou modifiés, car cela peut entraîner des rendus inattendus ou un rendu incorrect.

6. Utilisez ShouldComponentUpdate et PureComponent dans les composants de classe

Pour les composants de classe, ShouldComponentUpdate est une méthode de cycle de vie qui vous permet de contrôler si un composant doit être restitué en fonction des modifications apportées aux accessoires ou à l'état.

Vous pouvez également utiliser PureComponent, qui implémente automatiquement ShouldComponentUpdate avec une comparaison superficielle des accessoires et de l'état.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

PureComponent est une alternative plus simple à ShouldComponentUpdate et permet d'éviter les nouveaux rendus inutiles en comparant les accessoires et l'état précédents et actuels.

7. Optimiser l'utilisation de l'API contextuelle

Lorsque vous utilisez l'API Context de React, soyez prudent en cas de surutilisation, car cela peut conduire à des rendus inutiles si chaque consommateur effectue un nouveau rendu lorsque la valeur du contexte change. Pour éviter cela :

Break down context providers into smaller ones, so only the necessary part of the state triggers updates.
Memoize values passed to the context provider using useMemo to avoid unnecessary re-renders.

const value = useMemo(() => ({ state, updateState }), [state]);

return (
  <MyContext.Provider value={value}>
    {children}
  </MyContext.Provider>
);

8. Lazy Load Components

For performance improvements, especially in large applications, you can lazy load components that are not immediately needed. This can reduce the initial rendering time and the load on the main thread.

React’s React.lazy and Suspense can help in lazy-loading components:

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

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

By lazy-loading components, you delay their rendering until they are actually needed, which reduces unnecessary renders and improves the user experience.

Conclusion

Maintaining performance in React apps requires optimizing re-rendering, especially as the application grows. Avoid needless re-renders by employing strategies like using React.memo, useCallback, useMemo, and breaking up big components into smaller ones. By putting these tactics to good use, you can make sure that your React application stays light-weight, responsive, and simple to update.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!