⚠️ NextJS + React18で2回useEffectが発火する問題
category
date
Jun 27, 2022
slug
react18-next-render-twice
status
Published
summary
NextJS + React18で2回useEffectが発火する問題について
type
Post
すでに最新バージョン使っている人たちの間では当たり前のことなのかもしれないですがメモ
NextJS + React18でuseEffectが2回呼ばれる現象
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fb91656aa-6c67-46dc-bdc5-db684d87f82c%2F9ae189f5-db4c-4921-983c-5aca26cda1fd%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588_2022-06-28_0.20.42.png%3Fid%3D42210f40-8c63-4ae7-aa5b-e32f24fe3b2b%26table%3Dblock%26spaceId%3Db91656aa-6c67-46dc-bdc5-db684d87f82c%26expirationTimestamp%3D1722146400000%26signature%3D7Rg_yhY2VcaWBg_UMu9ufclwgOc6Y0uvHnQe7bbtg2s?table=block&id=42210f40-8c63-4ae7-aa5b-e32f24fe3b2b&cache=v2)
NextJS + React 18の環境下で、useEffectまたはuseUpdateEffectが読み込み時に2回呼ばれてしまう問題 現象がありました。
これについては以下にも議論がありました。
公式docsにもちゃんと記述されます。
これは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にする
});