React の useUnload フックをマスターする

はじめに

この実験では、React の useUnload フックを探索します。このフックを使用すると、beforeunload ウィンドウイベントを処理できます。この実験の目的は、このフックを使用して、ユーザーがウィンドウを閉じようとしたときにトリガーされるコールバック関数を作成する方法を示すことです。また、コンポーネントがアンマウントされた後のクリーンアップを行う方法も学びます。この実験の最後まで進めると、React でウィンドウイベントを管理する方法をより深く理解できるようになります。

React の useUnload フック

index.html と script.js はすでに仮想マシン（VM）に用意されています。一般的には、script.js と style.css にコードを追加するだけです。

beforeunload ウィンドウイベントは、以下の手順で処理できます。

useRef() フックを使用して、コールバック関数 fn のリフ（ref）を作成します。
useEffect() フックと EventTarget.addEventListener() を使用して、ユーザーがウィンドウを閉じようとしたときにトリガーされる 'beforeunload' イベントを処理します。
EventTarget.removeEventListener() を使用して、コンポーネントがアンマウントされた後のクリーンアップを行います。

コードは次の通りです。

const useUnload = (fn) => {
  const callbackRef = React.useRef(fn);

  React.useEffect(() => {
    const callback = callbackRef.current;
    window.addEventListener("beforeunload", callback);
    return () => {
      window.removeEventListener("beforeunload", callback);
    };
  }, [callbackRef]);
};

const App = () => {
  useUnload((e) => {
    e.preventDefault();
    const exit = confirm("Are you sure you want to leave?");
    if (exit) window.close();
  });

  return <div>Try closing the window.</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

右下隅にある「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新すると、Web ページをプレビューできます。

まとめ

おめでとうございます！React の useUnload フックの実験を完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。