Optimisation des performances en React

Introduction

React est conçu pour être performant, mais certaines pratiques peuvent ralentir une application, surtout à grande échelle. L'optimisation des performances consiste à utiliser des stratégies permettant de minimiser les rendus inutiles, de réduire la charge du CPU et d'améliorer la réactivité.

1. Utiliser le React.memo pour les composants fonctionnels

Qu'est-ce que c'est ? React.memo est une fonction d'ordre supérieur qui permet d'éviter des rendus inutiles d'un composant fonctionnel si ses props n'ont pas changé.

Quand l'utiliser ? Utilise React.memo lorsque tu as des composants qui reçoivent des props qui ne changent pas fréquemment.

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendering MyComponent');
  return 
{name}
;
});
    

2. Utiliser le useMemo pour mémoriser les résultats des calculs

Qu'est-ce que c'est ? useMemo est un hook qui permet de mémoriser le résultat d'une fonction coûteuse en termes de calcul et de ne recalculer la valeur que lorsque les dépendances changent.

Quand l'utiliser ? Utilise useMemo lorsque tu as des calculs lourds ou des objets qui sont passés en props à des composants enfants.

const expensiveValue = useMemo(() => {
  return expensiveComputation(a, b);
}, [a, b]);
    

3. Utiliser le useCallback pour mémoriser les fonctions

Qu'est-ce que c'est ? useCallback est un hook qui permet de mémoriser une fonction et de ne la recréer que lorsque ses dépendances changent.

Quand l'utiliser ? Utilise useCallback lorsque tu passes des fonctions en props à des composants enfants pour éviter que ces composants ne se re-rendent inutilement.

const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []); // `handleClick` ne change jamais
    

4. Optimiser les listes avec React.PureComponent

Qu'est-ce que c'est ? React.PureComponent est une classe de base pour les composants qui implémentent une comparaison superficielle des props et de l'état (shallow comparison). Cela permet de rendre uniquement les composants dont les props ou l'état ont changé.

Quand l'utiliser ? Utilise PureComponent pour les composants de type classe où tu souhaites éviter les rendus inutiles.

class MyComponent extends React.PureComponent {
  render() {
    return 
{this.props.name}
;
  }
}
    

5. Code Splitting et Lazy Loading

Qu'est-ce que c'est ? Le code splitting permet de diviser le code JavaScript en plusieurs morceaux (chunks), de manière à ne charger que le code nécessaire à un moment donné. Le lazy loading permet de charger un composant ou une ressource seulement lorsqu'il/elle est nécessaire.

Quand l'utiliser ? Utilise le code splitting et lazy loading pour améliorer le temps de chargement de l'application, surtout pour les applications React complexes.

import React, { Suspense, lazy } from 'react';

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

function App() {
  return (
    Loading...

import { FixedSizeList as List } from 'react-window';

function App() {
  return (
    
      {({ index, style }) => 
Item {index}
}
    
  );
}
    

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.name !== this.props.name;
  }

  render() {
    return 
{this.props.name}
;
  }
}
    

const items = ['Item 1', 'Item 2', 'Item 3'];

return (
  

    {items.map((item, index) => (
      
{item}
    ))}
  
);