Dans les projets React, on utilise souvent useEffect par réflexe, mais cette approche peut parfois complexifier ton code inutilement. Dans cet article, on va voir des cas où tu n'as pas besoin de useEffect et comment optimiser ton code en évitant d'y recourir à tort.
Comprendre le rôle de useEffect
Le hook useEffect est utile pour gérer des effets secondaires comme des abonnements ou des opérations qui doivent se déclencher en dehors du flux de rendu principal. Cependant, certains cas d'utilisation courants peuvent être simplifiés sans useEffect.
1. Initialiser l'état sans useEffect
Tu veux souvent initialiser un état basé sur des props ou des valeurs initiales au montage du composant. Au lieu d'utiliser useEffect pour définir cet état, tu peux le faire directement avec useState, ce qui rendra ton code plus clair et préviendra des appels inutiles.
Mauvaise pratique avec useEffect :
Bonne pratique sans useEffect :
Ici, on peut simplement initialiser l’état greeting en utilisant une fonction dans useState :
Cette approche rend le code plus concis et évite d’ajouter un effet superflu qui pourrait ralentir ton application.
2. Calculer des valeurs dérivées
Si tu as besoin de calculer une valeur en fonction de l’état ou des props, essaie d’utiliser une variable dérivée ou un memo plutôt qu’un useEffect.
Exemple avec useEffect (à éviter) :
Solution sans useEffect :
Ici, la valeur total peut être calculée directement pendant le rendu, sans dépendre de useEffect :
Cette méthode est non seulement plus propre, mais elle élimine le besoin de gérer des états supplémentaires.
3. Utiliser useMemo pour des calculs lourds
Pour des calculs coûteux ou dépendants de plusieurs variables, utilise useMemo afin d’éviter de réexécuter la logique à chaque rendu, sans avoir besoin de useEffect pour gérer l'état.
Exemple avec useEffect :
Approche optimisée avec useMemo :
Ici, useMemo permet de mémoriser le résultat sans avoir à gérer un effet, ce qui rend le composant plus prévisible et performant.
4. Synchroniser les propriétés d’un composant contrôlé
Pour gérer les entrées contrôlées, tu n’as pas besoin d’utiliser useEffect pour synchroniser les valeurs des inputs avec l'état du composant parent. Utilise simplement les props et les fonctions de rappel pour gérer cet état efficacement.
Exemple avec useEffect (inutile) :
Solution sans useEffect :
L’utilisation directe des props simplifie le code et améliore la performance en réduisant le nombre de mises à jour d’état inutiles.
5. Manipuler le DOM directement dans le rendu
Si tu veux appliquer des styles ou des classes basés sur l’état, il est souvent inutile de passer par useEffect. React gère très bien ce type de synchronisation lors du rendu.
Exemple avec useEffect :
Solution sans useEffect :
Conclusion
Éviter useEffect permet souvent de simplifier ton code et d'améliorer les performances de ton application React. En réévaluant les raisons d’utiliser un effet, tu pourras créer des composants plus clairs et éviter des erreurs liées à des dépendances mal configurées. La clé est d’identifier les cas où l'état, les valeurs dérivées, ou useMemo suffisent pour répondre à tes besoins sans effets secondaires.
