Closed2021/10/24にクローズ1

初回は実行されないuseEffectのカスタムフックを作る（React）

React

catnose

ReactのuseEffect()は普通に呼び出すと、依存配列を空にしていてもマウント時に実行される。

マウント時に実行されない（= 依存配列に変更があったときのみ実行される）ようにするには以下のようなカスタムフックを作ればOK。

※ TypeScriptで書いた場合

useDidUpdateEffect.ts

import { useRef, useEffect, EffectCallback, DependencyList } from 'react';

// 初回の実行がスキップされるuseEffect
export function useDidUpdateEffect(fn: EffectCallback, deps: DependencyList) {
  const didMountRef = useRef(false);

  useEffect(() => {
    if (!didMountRef.current) {
      didMountRef.current = true;
    } else {
      fn();
    }
  }, deps);
}

「初回の呼び出しかどうか」の状態はuseStateではなくuseRefに持たせることで余計な再レンダリングを防ぐことができる。

あとはuseEffectと同じような形で呼び出せる。

  useDidUpdateEffect(() => {
    console.log("依存配列に変更がありました")
  }, [foo, bar]);

このスクラップは2021/10/24にクローズされました