😀

React Hooksの10種類を理解する（Basic: useEffect）

に公開
React
React Hooks
tech

React Hooksの10種類を理解する（Basic: useEffect）

useEffectの基本

  • 「DOMの書き換え（mutation）」「データ購読（subscriptions）」「timer」「logging」などの副作用（side effects） においては、UIにまつわるバグや非整合性を引き起こす原因となる。そのため、関数component本体（React Render Phase）で描写することはできない。そのような場合に使用するのがuseEffectになる。
  • useEffectに渡された関数は、renderが画面に描写された後に動作する。
  • componentDidMountとcomponentDidUpdateの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追記) useEffectとuseLayoutEffectとの違い

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

reference

GitHubで編集を提案

Discussion