componentDidMount / componentWillUnmount を useEffectで書き換えたいっ!

そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。

componentDidMount

componentDidMount() {
  console.log('mount!!');
}

マウントされた時に何かしたいやつですが、これをhooksにすると

useEffect(() => {
  console.log('mount!!');
}, []);

で近い感じ。

useEffectの第2引数の変更があった時に動くようになります。
今回は初回に動くだけでいいので、[]にしてあります。

componentWillUnmount

componentWillUnmount() {
  console.log('Unmount!!');
}

アンマウントされた時に何かしたいやつ。これの場合は

useEffect(() => {
  return () => {
    console.log('Unmount!!');
  };
}, []); 

これで近いかな?
useEffectのreturnはアンマウントの直前に呼ばれる。