React useEffect フックが空の依存関係配列でも複数回実行されるのはなぜですか?

質問
React プロジェクトで作業しているときに、useEffect フックに関する問題が発生しました。私の目標は、コンポーネントのマウント時に API からデータを 1 回だけフェッチすることでした。ただし、空の依存関係配列を指定したにもかかわらず、useEffect は複数回実行され続けました。

コード スニペットは次のとおりです:

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;

空の依存関係配列 ([]) にもかかわらず、useEffect が複数回実行されました。開発サーバーを再起動しようとしましたが、問題は解決しませんでした。調査とトラブルシューティングを行った結果、根本原因を特定して解決しました。
答え

なぜこれが起こるのか

開発中の厳密モード:

StrictMode が有効になっている React の開発モードでアプリが実行されている場合、React は意図的にコンポーネントを複数回マウントおよびアンマウントします。これは、問題の原因となる可能性のある副作用を検出することを目的とした開発専用の動作です。

再レンダリングまたはホット モジュール交換 (HMR):

開発中にコードが変更されると、ホット モジュール置換がトリガーされ、コンポーネントが再レンダリングされ、useEffect が再度実行される場合があります。

この動作を修正または処理する方法

厳密モードの特定:

StrictMode を使用している場合、この動作は開発時にのみ発生し、運用ビルドには影響しないことを理解してください。
を削除すると、一時的に無効にすることができます。

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

ただし、有効のままにし、潜在的な副作用を適切に処理できるようにコードを調整することをお勧めします。

重複した API 呼び出しの防止:

フラグを使用して、コンポーネントのライフサイクル中に API 呼び出しが 1 回だけ発生するようにします

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;

useRef を使用すると、StrictMode による追加のレンダリングに関係なく、API 呼び出しが 1 回だけ行われるようになります。

重要なポイント
。開発中の React の Strict モードは意図的であり、オンのままにしても安全です。
。実稼働ビルドではこの問題は発生しません。 。必要に応じて useRef またはその他の手法を使用して副作用を管理します。
必要に応じて useRef またはその他の手法を使用して副作用を管理します。
実稼働ビルドではこの問題は発生しません。
必要に応じて useRef またはその他の手法を使用して副作用を管理します。

以上がReact useEffect フックが空の依存関係配列でも複数回実行されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。