React: useEffectが2回実行される件【備忘録】

前提

以下のような関数コンポーネントがある

const MyComponent = () => {
  useEffect(() => {
    console.log("useEffect処理実行");
  }, []);
  return <div>マイコンポーネント</div>;
};

開発モードで確認すると、コンソールログが2度表示される

原因

• Strictモードが原因だった模様
• 開発モードの時のみ意図的に挙動となる(特定の関数のみ、公式に記載あり)

<React.StrictMode>
  <MyComponent />
</React.StrictMode>

• 以下に役立つ(公式より)

安全でないライフサイクルの特定
レガシーな文字列 ref API の使用に対する警告
非推奨な findDOMNode の使用に対する警告
意図しない副作用の検出
レガシーなコンテクスト API の検出
安全でない副作用の検出

参考

• strict モード | React