useMemo vs useState + useEffect en React

En tant que développeur web, tu es constamment à la recherche d'optimisations pour rendre tes applications plus rapides et plus réactives. React, une bibliothèque JavaScript développée par Facebook, est devenu un outil incontournable pour construire des interfaces utilisateur dynamiques. Dans cet univers, comprendre et savoir quand utiliser les hooks tels que useState, useEffect, et useMemo peut faire une grande différence dans la performance de tes applications.

useState + useEffect : Les Bases

useState est le hook de base pour gérer l'état local dans les composants fonctionnels de React. Simple et puissant, il te permet de garder le state entre les différents rendus. Imaginons que tu construises une application de comptage. Voici un exemple simple :

import { useState } from 'react';

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementer</button>
    </div>
  );
}

useEffect, d'autre part, est utilisé pour exécuter des effets secondaires dans tes composants. Par exemple, récupérer des données après le premier rendu ou écouter des événements. L'erreur classique est de sous-estimer son impact sur les performances, surtout lorsqu'il est mal utilisé avec des dépendances non contrôlées.

useMemo : Un Outil de Performance

useMemo est un hook qui mémorise le résultat d'une fonction. Son but principal est d'éviter des calculs coûteux sur des rendus qui n'ont pas changé les dépendances. Si tu travailles sur une application qui effectue des calculs lourds, comme des transformations de données complexes, useMemo peut réduire significativement le temps de rendu.

import { useMemo } from 'react';

function ComplexComponent({ list }) {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return list.sort();
  }, [list]);

  return <ul>{sortedList.map(item => <li key={item}>{item}</li>)}</ul>;
}

Dans cet exemple, la liste ne sera triée que lorsque l'objet list lui-même changera, pas à chaque rendu.

Comparaison : Quand Utiliser Chacun ?

La règle de base est simple : utilise useState + useEffect pour gérer l'état et les effets secondaires basés sur des changements d'état ou de props. useMemo devrait être utilisé quand tu as besoin de mémoriser le résultat d'une opération coûteuse pour éviter de la refaire inutilement.

Considérons un cas où ton application doit afficher une liste filtrée basée sur l'input de l'utilisateur. Tu pourrais être tenté d'utiliser useEffect pour recalculer la liste à chaque fois que l'input change, mais si le calcul est lourd, il serait plus judicieux d'utiliser useMemo.

Conclusion

Choisir entre useMemo et useState + useEffect dépend largement de ce que tu essaies d'accomplir. Expérimenter avec ces hooks et observer leur impact sur les performances de ton application est essentiel. N'hésite pas à tester différentes approches pour trouver l'équilibre parfait pour ton projet.