【React19.2】新機能useEffectEventの使いどころと注意点

こんにちは！KENTEMのフロントエンジニア、S.W.です。昨年React19の正式版が公開され、私のプロジェクトでは今年の夏にReact18から19へ更新を実施しました。

依存ライブラリの更新や移行作業には苦労しました…。

そして、更新直後の10月1日にReact19.2が公開されました。

すでにReact19.1へ更新済みなので恐れることなく、今回の開発でReact19.2を取り入れることにしました。

react.dev

早速、新機能 useEffectEvent の使いどころがあったので、使い方をご紹介します。

useEffectEventとは
どんなときに使えるの？
利用する際の注意
参考リンク
まとめ
おわりに

useEffectEventとは

簡単に言うとエフェクトの「イベント部分」を分離して定義することができるラップ関数です。 useEffectEvent は常に最新の props と state を参照できます。

呼び出しは次のフックからのみ可能です。

useEffect
useLayoutEffect
useInsertionEffect

どんなときに使えるの？

例

以下のようなコンポーネントを考えます（極端なパターンです）。

function TestTimer() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [sum, setSum] = useState(0);

  const eventCount2 = useCallback(() => {
    console.log('eventCount2(useEffectTest)');
    if (count1 !== 1) return;
    setCount2(count1);
  }, [count1]);　// ※

  useEffect(() => {
    console.log('useEffect count1(useEffectTest)');
    setCount1(1);
    const timer = setTimeout(() => {
      eventCount2();
    }, 300);
    return () => clearTimeout(timer);
  }, [eventCount2]);　// ※

  useEffect(() => {
    console.log('useEffect sum(useEffectTest)');
    setSum(count1 + count2);
  }, [count1, count2]);

  return (
    <div>
      <div>count1: {count1}</div>
      <div>count2: {count2}</div>
      <div>sum: {sum}</div>
    </div>
  );
}

※ useEffect で呼び出している eventCount2 は、クロージャによって count1 が初回レンダリング時の状態のままになるため、依存配列に含めています。また、eventCount2 をそのまま依存配列に含めると、再レンダリング時に毎回再生成されて useEffect が頻発してしまうため、useCallback でラップし、依存配列に count1 を含めることで、count1 の更新時にのみ eventCount2 が再生成されるようにしています。

この例では、上記コンポーネントがレンダリングされるとき、以下の通り出力されます。

初回レンダリング時

useEffect count1(useEffectTest)：1回
useEffect sum(useEffectTest)：1回

状態変化時

useEffect count1(useEffectTest)：1回
useEffect sum(useEffectTest)：2回（count1変更時、count2変更時）

useEffect が計５回実行されています。これを以下の通り計３回になるよう改善します。

useEffect count1(useEffectTest)　初回レンダリング時のみ
useEffect sum(useEffectTest)　初回レンダリング時とcount2更新時のみ

useEffectEvent無しで改善

function TestTimer() {
  const [count1, setCount1] = useState(0);
  const count1Ref = useRef(count1);
  const [count2, setCount2] = useState(0);
  const [sum, setSum] = useState(0);

  const eventCount2 = () => {
    console.log('eventCount2(useEffectTest)');
    if (count1Ref.current !== 1) return;
    setCount2(1);
  };

  useEffect(() => {
    console.log('useEffect count1(useEffectTest)');
    setCount1(1);
    count1Ref.current = 1;
    const timer = setTimeout(() => {
      eventCount2();
    }, 300);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    console.log('useEffect sum(useEffectTest)');
    if (!count2) return;
    setSum(count1 + count2);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [count2]);

  return (
    <div>
      <div>count1: {count1}</div>
      <div>count2: {count2}</div>
      <div>sum: {sum}</div>
    </div>
  );
}

目的は達成できたものの、ESlintの警告を抑制したり、ref に値を退避したりする実装はスマートとは言えません。

state を ref に保持する戦略や、依存配列からイベント関数を外す設計は煩雑さを招くことがあります。

このようなケース、似たような事例を見かけたことはありませんか？

私のプロジェクトのコードにも、そうした実装が含まれています…

それでは useEffectEvent を使ってみましょう！

useEffectEventで改善

function TestTimer() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [sum, setSum] = useState(0);

  const eventCount2 = useEffectEvent(() => {
    console.log('eventCount2(useEffectTest)');
    if (count1 !== 1) return;
    setCount2(1);
  });

  useEffect(() => {
    console.log('useEffect count1(useEffectTest)');
    setCount1(1);
    const timer = setTimeout(() => {
      eventCount2();
    }, 300);
    return () => clearTimeout(timer);
  }, []);

  const eventSum = useEffectEvent((count: number) => {
    console.log('eventSum(useEffectTest)');
    setSum(count1 + count);
  });

  useEffect(() => {
    console.log('useEffect sum(useEffectTest)');
    if (!count2) return;
    eventSum(count2);
  }, [count2]);

  return (
    <div>
      <div>count1: {count1}</div>
      <div>count2: {count2}</div>
      <div>sum: {sum}</div>
    </div>
  );
}