React の useComponentWillUnmount フック

はじめに

この実験では、React の useComponentWillUnmount フックを調べます。このフックを使うと、コンポーネントがアンマウントされ破棄される直前にコールバック関数を実行できます。このフックを使うことで、イベントリスナーの削除や保留中のリクエストのキャンセルなど、必要なクリーンアップタスクを行うことができます。この実験では、このフックの使い方と動作を理解するための実践的な経験を提供します。この動作は、クラスコンポーネントの componentWillUnmount() ライフサイクルメソッドと似ています。

Skills Graph

React の useComponentWillUnmount フック

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

コンポーネントがアンマウントされ破棄される直前にコールバックを実行するには、2番目の引数として空の配列を持つ useEffect() フックを使うことができます。クリーンアップ前に一度だけ実行されるように提供されたコールバックを返します。この動作は、クラスコンポーネントの componentWillUnmount() ライフサイクルメソッドに似ています。また、以下のコードスニペットを使って、onUnmountHandler 関数を引数として取り、コンポーネントがアンマウントされる前にそれを実行するカスタムフック useComponentWillUnmount() を作成することもできます。

const useComponentWillUnmount = (onUnmountHandler) => {
  React.useEffect(
    () => () => {
      onUnmountHandler();
    },
    []
  );
};

その後、このカスタムフックを関数型コンポーネントで次のように使うことができます。

const Unmounter = () => {
  useComponentWillUnmount(() => console.log("Component will unmount"));

  return <div>Check the console!</div>;
};

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

これにより、コンポーネントがアンマウントされる直前にコンソールに "Component will unmount" が表示されます。

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

まとめ

おめでとうございます！あなたは React の useComponentWillUnmount フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。