React レンダリング時、useEffectが２回走る時がある

React レンダリング時、useEffectが２回走る時があって、
useEffectでconsole.logで確認すると分かる。

環境の整理

node v18.11.0
React 18.2.0

原因

React.StrictMode

方法

シンプルに、React.StrictModeタグを削除すればOK

変更前

変更後

しかし、理由を理解した上でしよう

React では、javascriptのstrict modeと同じ文法を提供する。
名前で類推できるように特定な文法を厳格に規定し、サービスが運用する環境で安全に動作するような役割を果たしているわけだ。

React.StrictModeの代表的な機能として、Componentが生きる周期を確認し、問題がある部分を開発者に知らせる役割を果たす。まだReactを使用するに慣れていない人は理由もなく、useEffect()が2回実行されると疑問を提起する。この２回実行される原因はReact.StrictModeで開発者に該当Componentが安全ではないことを知らせる動作である。これを double-invokingと呼ばれる。

React.StrictModeのこの警告行為は開発段階だけで適用されて、リリースされたら自動的に動作しない。
しかし、開発段階で予想せぬ動作により開発者に混乱を惹起する場合がある。
混乱をさけるために、一旦React.StrictModeを削除しといて、開発をすすめていいかと。
よね？笑

OK