😀

React Hooksの10種類を理解する(Basic: useEffect)

commits1 min read

React Hooksの10種類を理解する(Basic: useEffect)

useEffectの基本

  • 「DOMの書き換え(mutation)」「データ購読(subscriptions)」「timer」「logging」などの副作用(side effects) においては、UIにまつわるバグや非整合性を引き起こす原因となる。そのため、関数component本体(React Render Phase)で描写することはできない。そのような場合に使用するのがuseEffectになる。
  • useEffectに渡された関数は、renderが画面に描写された後に動作する。
  • componentDidMountcomponentDidUpdateの2つの機能を持ったhookである。

effectの初期化(cleanup)

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
});
  • 上記の例では、更新がされるたびに新しいsubscriptionが作成されることになる。
  • 前回のeffectは、次回のeffectが実行される前にcleanupされる。

条件付きでuseEffectを実行

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);
  • 上記の例だと、useEffectの第2引数として、[props.source]が設定されている。こうすることによって、props.sourceが更新されたときのみuseEffectを実行するようになる。
  • 空配列([])の場合、mount時にeffectが実行され、unmount時にcleanupされるが、更新時には実行されないことになる。

(2021.08.04追記) useEffectuseLayoutEffectとの違い

callback関数の実行タイミングの違いによって使い分けをする。
useEffectは画面描写後の実行、useLayoutEffectは画面描写前の実行となる。
公式にも記載されているが、画面の更新がブロックするのを避けるため、標準の useEffect を優先して使うほうがよい。

reference

GitHubで編集を提案

Discussion

ログインするとコメントできます