Effect Hook でライフサイクルを扱う

クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの

クラスコンポーネントのライフサイクルメソッドは、「このタイミングでこの処理をする」という発想だったのに対し、Effect Hook では「この処理はこのタイミングとこのタイミングでやる」という発想になっている。

useEffect()(() => {
  doSomething();

  return clearSomething();
}, [watchVar]);

useEffect() の第一引数に、引数なしの関数を設定すると、コンポーネントのレンダリングの直前に実行される（ここでは doSomething() ）
useEffect() の第二引数は、変数の配列で、省略可能。配列の中の変数が、前回のレンダリング時と変わらなければ、第一引数で渡された関数の中身の副作用処理実行がキャンセルされることになる
コンポーネントのアンマウント時にreturn 文が返される（ここでは clearSomething() が実行される）
第二引数を省略すると、レンダリングのたびに doSomething() が実行される
第二引数を空配列にすると、doSomething() は初回のレンダリングでしか実行されない

こちらのほうが、コード量は減るかもしれない？

というわけで早速書いてみました。