useMemo vs useState + useEffect en React

23/04/2024
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.