Pas besoin d'utiliser useEffect ? Le plugin ESLint qui rend le code plus propre

Bonjour ! C'est Code — votre guide dans le monde de la programmation. Nous ne nous contentons pas d'analyser de nouveaux outils, mais nous partageons également des astuces dans notre Chaîne Telegram — rejoignez-nous, plus de 1 500 développeurs y discutent des dernières fonctionnalités et partagent leur expérience.

Problème d'utilisation excessive d'UseEffect

React nous a donné le crochet useEffect il y a longtemps, et il est devenu un « couteau suisse » universel pour les effets secondaires. Mais il y a un effet secondaire : les développeurs l'utilisent souvent là où il n'est pas du tout nécessaire.

👉 En conséquence, le code devient un gâchis : un tas d'abonnements, des re-render inutiles, des dépendances qui vous donnent des maux de tête.

👉 Mais dans de nombreux cas, vous pouvez vous en sortir avec des calculs simples ou de la mémorisation.

Que fait le plugin ?

Le plugin ESLint eslint-plugin-you-might-not-need-an-effect est apparu comme un remède à l'habitude de « tout mettre dans useEffect ».

Il analyse votre code et vous indique quand useEffect est redondant. Par exemple :

❌ Utilisation inutile de useEffect uniquement pour calculer la valeur → mieux useMemo.

❌ Mise à jour de l'état à l'intérieur de l'effet sans dépendance → bonjour boucle infinie.

❌ Effets secondaires qui peuvent être placés directement dans le rendu ou le rappel.

Des exemples de règles sont décrits ci-dessous :

Exemple 1 : useEffect inutile

// Mauvais
useEffect(() => {
  setValue(a + b);
}, [a, b]);

// Bien
const value = a + b;

Exemple 2 : mémorisation au lieu d'effet

// Mauvais
useEffect(() => {
  const filtered = items.filter(fn);
  setFiltered(filtered);
}, [items, fn]);

// Bien
const filtered = useMemo(() => items.filter(fn), [items, fn]);

En quoi cela aide-t-il ?

1. Le code devient plus propre et plus prévisible.

2. Moins de re-rendering inutiles → performances supérieures.

3. Tu commences à mieux comprendre, où un effet secondaire est vraiment nécessaire, et où est cette « béquille ».

useEffect est un outil puissant, mais sa réutilisation conduit au chaos. Le plugin you-might-not-need-an-effect aide à « se prendre par la main » et à apprendre à écrire des composants React plus facilement.

Essayez de l'intégrer à votre projet et vous verrez à quel point le code deviendra plus propre.

Plus de telles analyses dans notre Chaîne Telegram — nous y discutons de nouveaux plugins, partageons des cours et analysons les dernières tendances en matière de développement.