[解決済み] React HooksでcomponentWillMount()を使用するには？

質問

Reactの公式ドキュメントには、以下のように記載されています。

Reactのクラスのライフサイクル・メソッドに慣れている人なら、次のように考えることができます。 useEffectフックは、componentDidMount, componentDidUpdate, and componentWillUnmountを組み合わせたものです。

質問ですが、どのようにすれば componentWillMount() ライフサイクル・メソッドをフックに組み込むことができます。

どのように解決するのですか？

既存のライフサイクルメソッド( componentDidMount , componentDidUpdate , componentWillUnmount など)をフックに入れることができます。これらは、クラスコンポーネントでのみ使用できます。そしてフックでは、機能的なコンポーネントでのみ使用することができます。以下の行は、Reactのドキュメントから引用したものです。

Reactのクラス・ライフサイクル・メソッドに慣れている人なら、次のように考えることができます。 useEffect フックとして componentDidMount , componentDidUpdate および componentWillUnmount を組み合わせたものです。

は、これらのライフサイクルメソッドをクラスコンポーネントから機能コンポーネントに模倣することができることを示唆しています。

内部コード componentDidMount コンポーネントのマウント時に一度だけ実行します。 useEffect この動作に相当するフックは

useEffect(() => {
  // Your code here
}, []);

ここで2番目のパラメータ（空の配列）に注目してください。これは一度だけ実行されます。

2番目のパラメータを使用しない場合 は useEffect フックはコンポーネントのレンダリングごとに呼び出されることになり、危険です。

useEffect(() => {
  // Your code here
});

componentWillUnmount は、イベントリスナーを削除したり、タイマーをキャンセルしたりといった後始末に使用します。例えば、イベントリスナーを componentDidMount で削除し componentWillUnmount を以下のように設定します。

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

上記のコードに相当するフックは、次のようになります。

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])