ページをリロードしたとき React のアンマウント処理は行われない

ページをリロードしたとき React のアンマウント処理は行われない

useEffect の return など、コンポーネントのアンマウント時に実行される処理ですが、これはページを再読み込みした時には実行されません。

リロード（だったり、アドレスバーに現在と同じ URL を指定して開いたり）はつまり、一度ページを閉じて新しく開くようなものです。

ページが閉じられるとき、そのタブのプロセスは破棄され、メモリもクリアされます。

そのため、React からするとアンマウント処理を行う必要性もないですし、また React がリロードを検知して何か処理を挟むようなこともできません。

補足：WindowEventHandlers.onbeforeunload #

WindowEventHandlers.onbeforeunload を使えばリロード前に処理を挟むことが可能です。

WindowEventHandlers.onbeforeunload

These events fire when a window is about to unload its resources.

window.addEventListener('beforeunload', (e) => {
  console.log('User is trying to reload.');
  e.preventDefault();
  e.returnValue = '';
});