浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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()のタイミングで指定した処理を実行する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)