Pourquoi mon hook useEffect se déclenche-t-il deux fois en mode développement React 18 ?

useEffect déclenchant plusieurs fois dans React 18 : causes et résolution

Dans l'environnement de développement de React 18, le hook useEffect peut parfois être invoqué deux fois lors du montage initial du composant. Ce comportement découle de la préparation de React pour les futures fonctionnalités de préservation de l'état de l'interface utilisateur.

Raison de la double invocation :

React anticipe un scénario dans lequel il doit remonter les arbres tout en préservant leur état. pour une expérience utilisateur fluide. Par exemple, lorsque vous changez d'onglet et revenez à une page, React vise à afficher exactement l'écran comme avant. Pour faciliter cela, il teste la résilience des composants en les démontant et en les remontant lors de l'initialisation.

Comportement de développement par rapport à la production :

Il est important de noter que cette double invocation se produit exclusivement en mode développement. Dans les environnements de production, useEffect se comporte comme prévu, n'étant invoqué qu'une seule fois par montage.

Gestion du problème :

Bien que la double invocation puisse sembler inhabituelle, elle présente une opportunité pour améliorer la qualité du code et l'aligner sur les futures versions de React. En règle générale, useEffect doit être résilient à plusieurs invocations et nettoyé correctement pour éviter les fuites de mémoire.

Exemple : Interval Inside useEffect :

Considérons un exemple dans lequel un intervalle est défini dans utiliserEffet. Pour éviter des problèmes potentiels en mode strict, la fonction de nettoyage doit clairement mettre fin à l'intervalle une fois le composant démonté.

useEffect(() => {
  const id = setInterval(() => setCount((prevCount) => prevCount + 1), 1000);
  return () => clearInterval(id);
}, []);

Approches alternatives (non recommandées) :

Certaines peut suggérer d'utiliser useRef et des instructions conditionnelles dans useEffect pour limiter son exécution à une seule fois. Cependant, React décourage explicitement de telles pratiques, soulignant l'importance d'implémenter la fonction de nettoyage à la place.

Appels API à l'intérieur de useEffect :

Si useEffect contient des appels API, envisagez d'utiliser fetch avec un AbortController. Le contrôleur permet d'abandonner les requêtes qui ne sont plus pertinentes lorsque le composant est démonté. Cela empêche les mises à jour d'état sur les composants non montés et améliore les performances.

Conclusion :

Comprendre la raison de la double invocation de useEffect dans React 18 et utiliser des techniques de manipulation appropriées peuvent conduire à un code plus robuste et sans bug. Indépendamment de sa nature temporaire en mode développement, il s'agit d'une excellente opportunité de renforcer la résilience des composants et d'assurer un fonctionnement fluide dans les futures versions de React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!