Reactでリロードを検知する方法

Reactでリロードを検知する方法

Reactでページのリロードを検知するために、beforeunloadイベントを使用できます。
以下は、TypeScriptを使用した例です。

import React, { useEffect } from 'react';

const ReloadDetector: React.FC = () => {
  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      const confirmationMessage = "ページをリロードしようとしています。";
      event.returnValue = confirmationMessage; // 一部のブラウザでは必要
      return confirmationMessage; // 古いブラウザ用
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return (
    <div>
      ページをリロードすると警告メッセージが表示されます。
    </div>
  );
};

export default ReloadDetector;

上記のコードをReactコンポーネントとして使用することができます。
この例では、beforeunloadイベントを監視して、ユーザーがページをリロードしようとする際に警告メッセージを表示します。

補足

この例では追加のライブラリのインストールは必要ありません。
ブラウザのネイティブイベントを使用しています。