React：useEffectについて

useEffectは、
デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、
特定の値が変化した時のみ動作させるようにすることもできます。

useEffect はブラウザが描画を終えるまで遅延されますが、次回のレンダーが起こるより前に実行されることは保証されています。
React は新しい更新を始める前に常にひとつ前のレンダーの副作用をクリーンアップします。

条件付きで副作用を実行する

デフォルトの動作では、副作用関数はレンダーの完了時に毎回実行されます。これにより、コンポーネントの依存配列のうちのいずれかが変化した場合に毎回副作用が再作成されます。
しかし、上述のデータ購読の例でもそうですが、これは幾つかのケースではやりすぎです。新しい購読を設定する必要があるのは毎回の更新ごとではなく、source プロパティが変化した場合のみです。
これを実装するためには、useEffect の第 2 引数として、この副作用が依存している値の配列を渡します。変更後の例は以下のようになります。

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

これで、データの購読は props.source が変更された場合にのみ再作成されるようになります。

空の配列 [] を渡すと、この副作用がコンポーネント内のどの値にも依存していないということを React に伝えることになります。
つまり副作用はマウント時に実行されアンマウント時にクリーンアップされますが、更新時には実行されないようになります。