【React】useEffectのポイント

関数コンポーネント

Reactではclass based componentが使われなくなってきて、functional componentを推しているようです。functional componentではhooksを使っていろいろ実装する必要があります。

functional componentではcomponentDidMountやcomponentDidUpdateは使えません。代わりにuseEffectを使うようです。

useEffectは第2引数が重要です。変更を監視する値を配列で指定します。空の配列を入れると一度だけ実行されます。componentDidMountと同じになります。

逆に何も指定しないとすべての変更のたびに実行されてしまいます。これは落とし穴ですね。

  // 一度だけ実行
  React.useEffect(() => {
    console.log('mounted');
  }, []);

値を指定するとその状態が変更されるたびに実行されます。componentDidUpdateのような使い方になります。値によって使い方が異なる場合はuseEffectを複数設置すればよいです。

  let [text, setText] = React.useState('')
  // textが変更の度に実行
  React.useEffect(() => {
    console.log('text changed');
  }, [text]);

戻り地はcomponentUnmount時に呼ぶcleanup関数にする必要がありますので、通常の値はwarningが出るので使えません。これはasyncをつけるとPromiseを返してしまうので、それもできないということです。

更に内側に即時関数などを作ってラップしてやる必要があります。

React.useEffect(() => {
    (async () => {
      let uid = await firebase.checkLoginUser();
    })();
  }, []);