Introduction

J'écris du code React depuis plus de 3 ans maintenant. Cependant, une chose sur laquelle je ne me suis pas concentré au départ était l’optimisation des performances de React. La plupart du temps, la dette technique s'accumule et il devient difficile d'optimiser les performances.

Il est assez difficile de se concentrer sur l'optimisation dès le début, mais vous pouvez planifier une optimisation de temps en temps pour éviter une énorme dette technique.

Nous allons examiner certaines des techniques d'optimisation pour React. Cela peut être implémenté pendant que vous écrivez du code. Il s’agit de choisir cette méthode plutôt qu’une autre.

Alors, commençons.

1. Optimisation d'une grande liste

La liste de rendu est assez courante car il existe des composants dans React. Le rendu d’une grande liste est difficile car cela peut ralentir le rendu et l’utilisation de la mémoire. La virtualisation est le meilleur moyen de résoudre de tels problèmes. Il affiche simplement uniquement les listes visibles et d'autres éléments seront affichés en cas de besoin.

React Window et React Virtualized sont des bibliothèques populaires pour la liste de virtualisation. Ils restituent uniquement les éléments visibles dans la fenêtre, réduisant considérablement le nombre de nœuds DOM rendus à un moment donné.

Voici un exemple avec React Window :

import { FixedSizeList as List } from 'react-window'; const MyList = ({ items }) => (  {({ index, style }) => ( 
 {items[index]} 
 )}  );

2. utiliserMemo

useMemo est un hook React qui mémorise le résultat d'un calcul. Ainsi, il ne permet pas de traitements multiples du calcul sauf en cas de changements dans les dépendances. Cela peut être utile pour optimiser les performances dans des scénarios où une fonction ou un calcul est coûteux et ne doit pas être réexécuté à chaque rendu.

La syntaxe de useMemo est :

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Comme vous pouvez le voir, useMemo prend deux arguments :

• Une fonction qui renvoie une valeur afin qu'elle puisse être mémorisée.
• Un tableau de dépendances qui déterminent quand la valeur mémorisée doit être recalculée.

Voici un exemple d'utilisationMemo :

import React, { useState, useMemo } from 'react'; const ExpensiveComponent = ({ a, b }) => { const computeExpensiveValue = (a, b) => { console.log('Computing expensive value...'); return a + b; }; const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); return (
         

          
Computed Value: {memoizedValue}
         
); }; const ParentComponent = () => { const [a, setA] = useState(1); const [b, setB] = useState(2); const [count, setCount] = useState(0); return (
         

          
          setCount(count + 1)}>Increment Count
         
); };

3. Fractionnement de code

Dans une configuration traditionnelle, tous les composants de votre application sont regroupés dans un seul fichier. Le fractionnement de code est une technique d'optimisation permettant de décomposer votre application en morceaux plus petits. Cela réduit le temps de chargement de l'application à mesure que vous chargez des composants plus petits et évite d'autres composants inutiles.

Voici un exemple de fractionnement de code :

import React, { useState } from 'react'; function App() { const [component, setComponent] = useState(null); const loadComponent = async () => { const { default: LoadedComponent } = await import('./MyComponent'); setComponent(); }; return ( 
 
Code Splitting Example
 Load Component {component} 
 ); } export default App;

4. Réagissez à la charge paresseuse

React.Lazy est une méthode importante pour optimiser le chargement des composants. Il vous permet de charger des composants paresseusement. Cela signifie que ce composant n'est chargé qu'en cas de besoin. En utilisant cela, vous pouvez diviser votre application en composants plus petits et chargés à la demande.

React.lazy() est utilisé pour importer un composant dynamiquement. Lorsque le composant est nécessaire, il est chargé de manière asynchrone et, d'ici là, une interface utilisateur de secours (comme une roulette de chargement) peut être affichée.

Voici un exemple de Lazy Load :

import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./MyComponent')); const App = () => { return ( 
 
My App
 Loading...
}>