【React】useEffect()を使ってcomponentWillUnmount()のタイミングで指定した処理を実行する

React Hook を今までしっかり使ったことがなかったので備忘録としてまとめ。
useEffect() を使った書き方で、componentWillUnmount() のタイミングで指定した処理を実行する方法についてです。
今までずっと class を使ったコンポーネントをメインで使っていたので、useEffect() を使ったことがなく…なかなか苦戦しました。

さて、実装方法ですが、参考にさせていただいた記事はこちら。

javascript – How to use componentWillMount() in React Hooks? – Stack Overflow
https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks

上記の記事で紹介されていたサンプルコードを参考に、下記のように記述すればOKでした。

const Component = () => {
  useEffect(() => {
    // componentDidMount のタイミングで実行したい処理を記述
    return () => {
      // componentWillUnmount のタイミングで実行したい処理を記述
    }
  }, []);
};

useEffect() 内で return() を呼び出し、その中に記述した処理は、ページを離脱する直前＝ componentWillUnmount() のタイミングで実行されるとのことでした。
実際にページに組み込んでみたところ、意図した通りのタイミングで処理が実行されることを確認できました！

以上、useEffect()を使ってcomponentWillUnmount()のタイミングで指定した処理を実行する方法についてでした。
ご参考になれば幸いです。