useEffectEvent – React

useEffectEvent は、エフェクトから非リアクティブなロジックを、エフェクトイベント (Effect Event) と呼ばれる再利用可能な関数へと抽出できるようにする React フックです。

const onSomething = useEffectEvent(callback)

コンポーネントのトップレベルで useEffectEvent を呼び出し、エフェクトイベントを宣言します。エフェクトイベントは、useEffect などのエフェクト内から呼び出すことができる関数です。

エフェクトイベント関数を返します。この関数は useEffectuseLayoutEffect、あるいは useInsertionEffect 内で呼び出すことができます。

通常、エフェクト内でリアクティブな値にアクセスする場合は、それを依存配列に含める必要があります。これにより、その値が変化するたびにエフェクトが再実行されます。通常はこれが望ましい動作です。

この例では、url が変化したあとの再レンダーではエフェクトが再実行されるべきですが(新しいページの訪問を記録するため)、numberOfItems が変化した場合には再実行されるべきではありません。ログ記録のロジックをエフェクトイベントでラップすることで、numberOfItems はリアクティブではなくなります。エフェクトをトリガすることなく、常に最新の値が読み取られます。

url のようなリアクティブな値は、エフェクトイベントに引数として渡すことで、それらをリアクティブに保ちながら、イベント内で最新の非リアクティブな値にもアクセスすることができます。