⚠️ NextJS + React18で2回useEffectが発火する問題

NextJS + React18でuseEffectが2回呼ばれる現象

NextJS + React 18の環境下で、useEffectまたはuseUpdateEffectが読み込み時に2回呼ばれてしまう問題現象がありました。

これについては以下にも議論がありました。

公式docsにもちゃんと記述されます。

React 18 is now available on npm! In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we'll give an overview of what's new in React 18, and what it means for the future.

https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

これはReact 18のStrict Modeの正しい振る舞いであると。assertion（検証）を実行するために、1度useEffectを読んだ後にstateを復元しようとする、という処理が走ります。

公式docsに記述の通り、Reactは読み込み等における状態保持の振る舞いのため、何度もコンポーネントがマウント・アンマウントされることに対して耐性を持つ必要が出てきたので、StrictModeをオンにした場合には、2回マウントされると問題があるようなコードが表面化するように開発専用のチェックを導入している、ということです。

解決方法

上記に基づくと、基本的には再レンダーで問題が起きるようなコードを書くべきではないです。

一方で、これが原因で実装のテストに影響が出るような場合には、StrictModeを一時的にオフにすれば問題ありません。

// next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  eslint: {
    dirs: ['.'],
  },
  poweredByHeader: false,
  trailingSlash: true,
  basePath: '',
  reactStrictMode: false, // ここをfalseにする
});