reactのホットリロードで要素やStateが更新されない時の対処法

Electron + Create Reac Appを使ってアプリを開発しているのですが、ホットリロードで更新されない要素があり、更新するたびに新しい要素が増えていくという現象に遭遇しました。

具体的には、CodeMirrorを使ったHookコンポーネントを更新してホットリロードが実行されると、事前に表示させていたCodeMirrorの上に新しいCodeMirrorが追加されます。

これは、ReactのFast Refreshという機能が、react-scripts4以降で有効になっているのが一因でした。

Fast RefreshはStateを維持したまま変更があったコンポーネントだけをリロードする機能で、ホットリロードより高速に更新できます。

しかし、Stateを維持したままなので今回のように意図しない動作が起こってしまうようです。

Fast Refreshをオフにする方法がありますので紹介します。

コードに// @refresh resetを追加

コンポーネントのどこでも良いので、

// @refresh reset

というコメントを追加するとStateを維持せず自動リロードしてくれるようになります。

僕の場合、これに加えてCodeMirrorで使用するTextareaタグをdivで囲ってあげると、自動リロードしてもCodeMirrorが増えることはなくなりました。

そもそもFast Refreshをオフにする

プロジェクト全体でFast Refreshをオフにする方法は2つあります。

npm start

npm startをする時に、下記のように「FAST_REFRESH=false 」を追加して実行する。

FAST_REFRESH=false npm start

.envファイルに記入

プロジェクトのルートに「.env」ファイルを作成し、その中で「FAST_REFRESH=false」を記述する

FAST_REFRESH=false

記述後は再びnpm startする必要があります。

おわりに

Fast Refreshはリロードがとても速く、リロードされたかわからない時があるくらいで便利ですが、Stateを維持することで意図しない動作になることがあるので注意が必要ですね。