🦄 ubuntu + Rails + Reactでコンポーネントファイルが更新されずハマった件
作成日： 2022/02/01
5

タイトル通り、解決まで数日費やしてしまったがようやくブラウザ上で更新されたのでメモ。

Reactだけ更新されない

Windowsのローカル環境でReactのみ使っていた際は全くそのようなことが無かったが、WSLの仮想環境（ubuntu）でRails上で作ったReactプロジェクト（frontend）が何だかうまく更新されない・・・。何故・・・？と思ってReactプロジェクトを個別で作ってみたがそちらもファイル更新してもキャッシュが残っているかのように更新されなかった。

参考になる記事も中々見つけられず、直接的な原因はよくわからないけれど、以下の記事の「そもそもFast Refreshをオフにする」のやり方で解消された。

Fast Refreshという機能

Fast Refreshはreact-scripts4以降で有効になっているReactの機能で、Stateを維持したまま変更があったコンポーネントだけをリロードする機能で、ホットリロードより高速に更新できるようだが、このStateを維持する状態がコンポーネントの更新を妨げてしまうらしい。

reactのホットリロードで要素やStateが更新されない時の対処法
https://keikenchi.com/what-to-do-when-element-or-state-is-not-updated-by-hot-reload-of-react

FAST_REFRESH=false npm start

で実行するか、package.jsonに

"scripts": {
    "start": "FAST_REFRESH=false PORT=3001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

の"start"の記述のようにして書いておけば実行のたびに指定する必要が省ける。

追記：
上記で更新されたのは事実だが、次の日新しい章でFAST_REFRESH=falseの設定を残していたばかりに、今度はホットリロードしなければならない所でリロードされず、画像が表示されないしソースが変わらないし・・とまたハマった。
FAST＿REFRESHを消したらリロードされた。
FAST_REFRESHの設定はあまり汎用性は無いようです。。
Takeuchi