Optimisation des Performances : Virtual DOM et Rerendering

Salut à tous !

Cette semaine, je me suis plongé dans l’optimisation des performances en React. L’un des points forts de React est son utilisation du Virtual DOM, qui permet d'améliorer considérablement l'efficacité des mises à jour de l’interface utilisateur.

Virtual DOM : Comment ça marche ?

Le Virtual DOM est une copie virtuelle du DOM réel qui permet à React d’optimiser les mises à jour de l’interface utilisateur. Lorsqu’un état change dans un composant, React compare la nouvelle version du Virtual DOM avec l’ancienne et met à jour uniquement les parties du DOM qui ont changé.

Exemple d'optimisation avec le Virtual DOM

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

Dans cet exemple, seul le texte affichant la valeur de count est mis à jour lorsque l’utilisateur clique sur le bouton, plutôt que de re-render toute la page.

Optimisation des Performances avec React.memo

React.memo est un HOC (Higher-Order Component) qui permet d’optimiser les performances en évitant le re-rendering des composants inutiles. Il fonctionne en mémorisant les props d’un composant et ne déclenche un nouveau rendu que si ces props changent.

Exemple avec React.memo

import React, { useState, memo } from 'react';

const ExpensiveComponent = memo(({ value }) => {
  console.log("Render de ExpensiveComponent");
  return <p>Valeur: {value}</p>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
      <button onClick={() => setOtherState(!otherState)}>Changer autre état</button>
      <ExpensiveComponent value={count} />
    </div>
  );
}

Ici, ExpensiveComponent ne sera re-rendu que si value change, même si otherState est mis à jour. Cela évite un re-render inutile du composant et améliore les performances.

useMemo et useCallback pour éviter les recalculs inutiles

Lorsque l’on effectue des calculs coûteux ou que l’on passe des fonctions à des composants enfants, useMemo et useCallback permettent d’éviter des recalculs ou des re-renders inutiles.

Exemple avec useMemo

import { useState, useMemo } from 'react';

function HeavyComputation({ nbr}) {
  const valeurCalcule= useMemo(() => {
    console.log("Calcul en cours...");
    return nbr * 2;
  }, [nbr]);

  return <p>Résultat : {valeurCalcule}</p>;
}

Dans cet exemple, valeurCalcule ne sera recalculé que si nbr change, évitant ainsi des calculs inutiles à chaque rendu.

Exemple avec useCallback

import { useState, useCallback } from 'react';

function Button({ onClick }) {
  return <button onClick={onClick}>Clique-la</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <p>Compteur : {count}</p>
      <Button onClick={handleClick} />
    </div>
  );
}

useCallback empêche la recréation de handleClick à chaque rendu, ce qui est utile lorsque l’on passe des fonctions en props à des composants enfants.

Mon ressenti

• J’ai mieux compris comment React gère les mises à jour efficacement grâce au Virtual DOM.
• React.memo est un outil puissant mais doit être utilisé avec précaution pour éviter des optimisations inutiles.
• useMemo et useCallback aident à améliorer les performances, mais il faut savoir les utiliser.

Dans le prochain article, je vais explorer la gestion de la navigation dans une application React !

Références

Source: React Hooks Tutorial https://www.robinwieruch.de/react-hooks/ (page consultée le 27 février 2025)

Source: 8 React Js performance optimization techniques YOU HAVE TO KNOW! - YouTube https://www.youtube.com/watch?v=CaShN6mCJB0 (page consultée le 27 février 2025)

Source: React Hooks cheat sheet: Best practices with examples https://blog.logrocket.com/react-hooks-cheat-sheet-solutions-common-problems/ (page consultée le 26-27 février 2025)