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

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

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 でさらに多くの実験を行って練習することができます。