BFE.devでのAI解答例 - React コーディング問題
16. useUpdateEffect()

import { useEffect, useRef } from 'react';

function useUpdateEffect(callback, dependencies) {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      return callback();
    }
  }, dependencies);
}

export default useUpdateEffect;

こちらが、useUpdateEffect() の実装例です。

useEffect() と同様に動作しますが、最初のレンダリング時にコールバックが実行されないようにします。このコンポーネントでは、依存配列 dependencies を利用してコールバックの実行時を制御しています。dependencies 配列が更新された場合にのみ、callback を実行します。最初のレンダリング時には isFirstRender が true のため、コールバックは実行されません。2回目以降のレンダリング時には callback を実行するようになります。