Optimisation dans React

Salut à tous, c’est Ismail ! Cette semaine, je vais parler d’un sujet crucial pour toute application React : l’optimisation des performances. Une mauvaise gestion du rendu peut rendre une application lente et peu réactive. Heureusement, React propose plusieurs outils pour éviter les re-renders inutiles et optimiser l’exécution du code.

Pourquoi optimiser les performances en React ?

Quand une application React devient complexe, certains composants peuvent être re-rendus inutilement, ce qui impacte les performances. Optimiser le rendu permet de :

• Améliorer la fluidité de l'interface
• Réduire la consommation de ressources
• Assurer une expérience utilisateur optimale

Voyons ensemble les techniques clés pour optimiser une application React !

1. Éviter les Re-renders Inutiles avec React.memo

React.memo est un Higher Order Component (HOC) qui empêche le re-render d’un composant si ses props n’ont pas changé.

import React from "react";

const Button = React.memo(({ onClick, label }) => {
  console.log("Bouton rendu !");
  return <button onClick={onClick}>{label}</button>;
});

export default Button;

Ici, le composant ne sera re-rendu que si ses props changent.

2. Optimiser les Fonctions avec useCallback

Les fonctions anonymes recréées à chaque rendu peuvent forcer le re-render des composants enfants. useCallback permet de mémoriser une fonction entre les re-renders.

import { useState, useCallback } from "react";
import Button from "./Button";

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

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <p>Compteur : {count}</p>
      <Button onClick={handleClick} label="Incrémenter" />
    </div>
  );
}

Avec useCallback, la fonction handleClick ne sera pas recréée à chaque rendu.

Sources

• REACT, React.dev, https://react.dev/reference/react/memo (Page consultée le 21 mars 2025)

• W3Schools, W3Schools, https://www.w3schools.com/react/react_usecallback.asp (Page consultée le 21 mars 2025)

• W3Schools, W3Schools, https://www.w3schools.com/react/react_usememo.asp (Page consultée le 21 mars 2025)