useEffect はデフォルトでソリューションを 2 回実行します

今日デモを書いたときに、react の最新バージョンを使用したのですが、useEffect に小さな問題を発見したので、記録しておきます。

このソースは、次のように作成された create-react-app のアプリ コードです。

 useEffect(() => {
    
    
    console.log("useEffect调用了~");
  },[]);

コンソール出力:

useEffect 呼び出し ~
useEffect 呼び出し ~

React18では useEffect のデフォルト動作が 2 回に変更されていることが判明しました。
この変更は開発モードおよび厳密モードでのみ発生するため、多くの開発者が非常に苦痛を感じていることは間違いありません。

解決

Index.tsx ファイル内の StrictMode を削除できます。これを追加します。

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

これに変更します

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);

もう一度コンソール出力を見てください。

~ という名前の useEffect

無事解決しました～