Pourquoi mon hook useEffect s'exécute-t-il deux fois dans React 18 (et comment puis-je le réparer) ?

Pourquoi useEffect s'exécute deux fois et comment le gérer dans React

Problème :

Lors de l'utilisation de useEffect pour enregistrer les changements d'état à la monture, on observe que l'effet se déclenche deux fois. Ce problème est rencontré dans React 18.

Raison :

Dans le mode de développement de React 18 avec StrictMode, useEffect est intentionnellement remonté une fois pour garantir que les composants critiques sont résilients à plusieurs cycles de montage et de démontage. React vise à préserver l'état pendant ces cycles pour de meilleures performances.

Solution :

Au lieu de s'appuyer sur l'exécution initiale de useEffect, il est recommandé d'utiliser une dépendance vide array ([]) qui exécute l'effet uniquement après le premier rendu :

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("rendered", count);
  }, []);

  return <div>...</div>;
};

Alternative Solutions :

Si la dépendance à l'état est essentielle et doit être vérifiée à chaque rendu, pensez à utiliser les approches suivantes :

• Fonction de nettoyage : Utilisez la fonction de nettoyage renvoyée par useEffect pour effectuer des effets secondaires lors du démontage du composant. Cela garantit un nettoyage approprié et évite les fuites de mémoire.
• useRef : Le hook useRef peut être utilisé pour stocker des références à des données mutables, et sa valeur persiste entre les rendus. Cela peut être utile pour suivre les changements d'état sans déclencher plusieurs appels useEffect.
• Mise en cache et anti-rebond : Si l'effet implique des requêtes externes, envisagez d'utiliser des techniques de mise en cache ou anti-rebond pour éviter les appels en double.

Comportement de production :

Il est important de noter que ce comportement ne se produit qu'en mode développement. Dans les versions de production, useEffect ne s'exécutera qu'une seule fois par montage de composant.

Conclusion :

Comprendre pourquoi useEffect s'exécute deux fois dans React 18 est crucial pour une écriture fluide et robuste Code de réaction. En utilisant les solutions appropriées décrites ci-dessus, les développeurs peuvent éviter les bogues, maintenir la cohérence des états et garantir des performances efficaces des applications.

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!