useEffectでconsole.log();などを記述した際に、
2 回出力されて気になったことはないでしょうか？
今回はuseEffectの実行が2回発生する現象を紐解いていきます。
以下のいくつかの原因が考えられます。
1. Strict Mode によるダブルレンダリング
Next.js の開発モードでは、React の Strict Mode (React.StrictMode) がデフォルトで有効になっており、useEffect の実行が 2 回発生することがあります。これは、useEffect 内での副作用が安全かどうかを確認するための仕様です。
このため、console.log が 2 回出力されることがありますが、本番ビルド (npm run build 後に npm start で実行) では 1 回だけ実行されるため、通常は問題ありません。
解決策
-
開発中のみの問題として無視するか、Strict Mode を無効にすることで一時的に解決できますが、Strict Mode はバグの早期発見に役立つため、通常は無効にしないことが推奨されます。
もし Strict Mode を一時的に無効にしたい場合、next.config.js の React.StrictMode を false に設定できます。
// next.config.js
module.exports = {
reactStrictMode: false,
};
2. 依存配列が正しく設定されていない
useEffect に依存配列を正しく設定していない場合、コンポーネントの再レンダリングや状態の更新のたびに useEffect が再実行されることがあります。今回のケースでは依存配列が空ですので、この可能性は低いですが、他のステートが関係しているか確認してみてください。
3. 開発ツールやブラウザのキャッシュ
特定の開発ツールやブラウザのキャッシュにより、console.log が二重に表示されることも稀にあります。一度ブラウザのキャッシュをクリアしたり、再起動して確認してみてください。
結論
最も可能性が高いのは React の Strict Mode によるもの です！
これは開発モードでのみ発生し、本番環境では問題にならないため、通常はそのまま無視して構いません。
コメント