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

以下は、Reactの useEffectOnce() を実装するコード例です。

import { useEffect } from 'react';

function useEffectOnce(effectFunc) {
  useEffect(effectFunc, []);
}

export default useEffectOnce;

この実装では、 useEffect() を呼び出して、空の依存リスト [] を渡しています。これにより、この useEffect() はコンポーネントのマウント時に一度だけ実行されます。引数の effectFunc は、 useEffect() 内で直接呼び出される関数であり、非同期処理を含めて好きな処理を実行できます。

実際に使用する場合は、以下のようにコンポーネント内で useEffectOnce をインポートして呼び出します。

import React from 'react';
import useEffectOnce from './useEffectOnce';

function MyComponent() {
  useEffectOnce(() => {
    console.log('This runs only once!');
  });

  return (
    // JSX など...
  );
}

このように、 useEffectOnce() を使うことで、コンポーネントがマウントされたタイミングで一度だけ処理を実行することができます。