useEffectが想定より多く呼ばれる

useEffect() が想定より多く呼ばれる事象に遭遇したので調査

useEffect() に仕込んだログが1回だけ出力されるかと思いきや2回出力されている様子

ちなみに Next.js を利用して開発している

version

• next
  • 12.3.1
• react
  • 18.2.0

原因

React 18以降のstrictモードだとコンポーネントの即時アンマウント・再マウントが走り、それに伴い useEffect() が再マウント時にも発火するのが原因だった。

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

この挙動は開発モードの場合にのみ適用され、本番用には影響を与えないとのこと

そのため next dev で動作させている場合は再現し、next build → next start で動作させている場合は再現しない

< React.StrictMode> の子じゃないのにstrictモードが有効になっている挙動だな？

next.config.js で reactStrictMode を true にしていると strictモードが有効になる

// next.config.js
module.exports = {
  reactStrictMode: true,
}

https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

いきなり全対応はできないな、という場合は個別に < React.StrictMode> を利用して段階的に対応していきこともできる。