Pourquoi mon useEffect s'exécute-t-il deux fois dans le mode strict de React 18 et comment puis-je y remédier ?

useEffect s'exécute deux fois : le gérer efficacement dans React

Pourquoi useEffect est-il appelé deux fois lors du montage dans React 18 en mode développement avec StrictMode activé ?

Comprendre le Reason

React 18, avec StrictMode activé, remonte les composants lors du rendu initial pour améliorer les performances et faciliter la détection des bogues. Ce remontage garantit que les composants peuvent gérer avec succès le montage et le démontage plusieurs fois.

Les effets s'exécutent plusieurs fois : est-ce un problème ?

La plupart des effets fonctionnent correctement malgré plusieurs montages. et se démonte. Cependant, certains effets peuvent rencontrer des problèmes s'ils négligent de nettoyer correctement les abonnements ou s'ils supposent un seul cycle de vie de montage-démontage.

Scénarios typiques où plusieurs appels sont problématiques

Fréquents Les situations dans lesquelles les appels à effets multiples peuvent causer des problèmes incluent :

• Requêtes HTTP : Les effets qui effectuent des requêtes au serveur peuvent envoyer des requêtes redondantes et entraîner un comportement inattendu.
• Effets basés sur les intervalles : Les effets qui impliquent la définition d'intervalles peuvent continuer à s'exécuter après le démontage du composant, provoquant des fuites de mémoire et des problèmes inattendus. résultats.

Solutions pour gérer plusieurs Appels

Plutôt que d'inhiber StrictMode ou d'utiliser des solutions de contournement complexes, React encourage les développeurs à implémenter des effets robustes qui gèrent plusieurs appels avec élégance. Cela implique la mise en œuvre de fonctions de nettoyage qui contrecarrent les actions de configuration de l'effet.

Fonctions de nettoyage

Fonctions de nettoyage généralement :

• Arrêtez ou annulez l'effet. opérations.
• Empêcher les effets secondaires de persister après le composant démonter.
• Abandonner les requêtes, effacer les intervalles ou annuler les abonnements créés par l'effet.

Exemple : Gestion de plusieurs requêtes HTTP

Voici un exemple de gestion de plusieurs requêtes HTTP dans useEffect :

useEffect(() => {
  const abortController = new AbortController();

  const fetchUser = async () => {
    try {
      const res = await fetch("/api/user/", {
        signal: abortController.signal,
      });
      // Process the response data
    } catch (error) {
      if (error.name !== "AbortError") {
        // Handle non-aborted errors
      }
    }
  };

  fetchUser();

  return () => abortController.abort();
}, []);

Avantages des effets robustes

Effets robustes qui gèrent efficacement plusieurs appels :

• Améliorez les performances et évitez les fuites de mémoire .
• Assurer un comportement sans bug même en mode développement lorsque le remontage devient évident.
• S'aligner sur les directives de développement de React et la compatibilité avec les versions futures.
• Faciliter un code plus fiable et maintenable.

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!