WSL2でCreate-React-AppのHot Reloadが効かないと感じた際の解決方法

タイトルの通りです。ググっても検索上位に出ないので、調べるのが地味に大変でした。

答えは公式のトラブルシューティングに掲載されていました。

Troubleshooting | Create React App

If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox,
create an .env file in your project directory if it doesn’t exist,
and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start,
the watcher uses the polling mode, as necessary inside a VM.

WSL2は動作の都合上、Linuxカーネルを仮想的に動かしていますので、ちょうど「inside a virtual machine」に符合します。
そのため、環境変数にCHOKIDAR_USEPOLLING=trueを追加する、この解決法がよく効くのです。
なお実際には、説明文にもある通り、「.envファイルを作成してその中に記述する」ことになるでしょう。

ちなみに「CHOKIDAR」の意味についてですが、Node.js向けのファイル変更監視ライブラリ「chokidar」に由来するものと思われます。

「React Hot Reload not working」などでググると、「Hot Reload stopped working with React "^17.0.1" #9904」などがヒットします。
そちらでは「.envファイル内にFAST_REFRESH=falseを追加してFast Refreshを無効化する」といった解決法が提示されています。

しかし、これは「ReactにおけるFast Refresh機能の問題についての解決法」であって、「Create React Appが仮想環境でHot Reloadされない問題についての解決法」ではありません。ご注意ください。