Pourquoi mon hook React useEffect s'exécute-t-il plusieurs fois même avec un tableau de dépendances vide ?

La Question
En travaillant sur un projet React, j'ai rencontré un problème avec le hook useEffect. Mon objectif était de récupérer les données d'une API une seule fois lors du montage du composant. Cependant, useEffect a continué à s'exécuter plusieurs fois, même si j'ai fourni un tableau de dépendances vide.

Voici l'extrait de code :

import React, { useEffect, useState } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    console.log("Fetching data...");
    axios.get("https://jsonplaceholder.typicode.com/posts")
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);
  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

Malgré le tableau de dépendances vide ([]), useEffect a été exécuté plusieurs fois. J'ai essayé de redémarrer le serveur de développement, mais le problème persiste. Après quelques recherches et dépannage, j'ai identifié la cause première et je l'ai résolue.
La réponse

Pourquoi cela se produit

Mode strict en développement :

Si votre application s'exécute en mode développement de React avec StrictMode activé, React monte et démonte intentionnellement les composants plusieurs fois. Il s'agit d'un comportement réservé au développement destiné à détecter les effets secondaires susceptibles de causer des problèmes.

Re-rendus ou remplacement de module à chaud (HMR) :

Pendant le développement, des modifications dans le code peuvent déclencher le remplacement du module à chaud, provoquant un nouveau rendu du composant et une nouvelle exécution de useEffect.

Comment corriger ou gérer ce comportement

Identifier le mode strict :

Si vous utilisez StrictMode, comprenez que ce comportement se produit uniquement en cours de développement et n'affectera pas la version de production. Vous pouvez le désactiver temporairement en supprimant

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));  

Cependant, il est préférable de le laisser activé et d’adapter votre code pour gérer les effets secondaires potentiels avec élégance.

Empêcher les appels API en double :

Utilisez un indicateur pour garantir que l'appel d'API n'a lieu qu'une seule fois au cours du cycle de vie du composant, même

import React, { useEffect, useState, useRef } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);
  const isFetched = useRef(false);

  useEffect(() => {
    if (isFetched.current) return;

    console.log("Fetching data...");
    axios.get("https://api.example.com/data")
      .then(response => setData(response.data))
      .catch(error => console.error(error));

    isFetched.current = true;
  }, []);

  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

L'utilisation d'un useRef garantit que l'appel d'API n'a lieu qu'une seule fois, quels que soient les rendus supplémentaires provoqués par StrictMode.

Principaux points à retenir
. Le mode strict de React en cours de développement est intentionnel et peut être laissé en toute sécurité.
. Les versions de production n’auront pas ce problème. . Utilisez useRef ou d’autres techniques pour gérer les effets secondaires si nécessaire.
Utilisez useRef ou d’autres techniques pour gérer les effets secondaires si nécessaire.
Les versions de production n’auront pas ce problème.
Utilisez useRef ou d’autres techniques pour gérer les effets secondaires si nécessaire.

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!