useEffectEventについてのメモ

2024-01-31

Tech

React

イベントとエフェクタの分離が useEffectEvent の目的、useEvent の後継として提案されている。

2024 年 1 月時点では、experimental、canary にも入っていない。

https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event

次のようなカスタムフックを考える。

1
function useChatRoom({ roomId, theme }) {
2
  useEffect(() => {
3
    const connection = createConnection(serverUrl, roomId);
4
    connection.on("connected", () => {
5
      showNotification("Connected!", theme);
6
    });
7
    connection.connect();
8
    return () => {
9
      connection.disconnect();
10
    };
11
  }, [roomId, theme]);
12
}

この例では、theme が切り替わる度に ChatRoom への接続が切れてしまう。ただし theme はリアクティブな値であるため、依存関係から入れる必要がある。

useEffectEvent を使えばリアクティブにしたくないイベントを、エフェクトから分離することが出来る。roomId の変更によってのみ再接続が行われる。

1
function useChatRoom({ roomId, theme }) {
2
  const onConnected = useEffectEvent(() => {
3
    showNotification("Connected!", theme);
4
  });
5

6
  useEffect(() => {
7
    const connection = createConnection(serverUrl, roomId);
8
    connection.on("connected", () => {
9
      onConnected();
10
    });
11
    connection.connect();
12
    return () => connection.disconnect();
13
  }, [roomId]);
14
}

制約#

エフェクト内からのみ呼び出せる。
他のコンポーネントやフックには渡せない。

1
const onTick = useEffectEvent(() => {
2
  callback();
3
});
4

5
// これはダメ
6
useTimer(onTick)
7

8
<Timer
9
  // これはダメ
10
  onTick={onTick}
11
/>

useEffectEvent を利用した例#

Callback が変更されても、interval がリセットされない。useEffectEvent を利用しない場合、callback が変更された際に interval がリセットされる。

1
function useTimer(callback, delay) {
2
  const onTick = useEffectEvent(() => {
3
    callback();
4
  });
5

6
  useEffect(() => {
7
    const id = setInterval(() => {
8
      onTick();
9
    }, delay);
10
    return () => {
11
      clearInterval(id);
12
    };
13
  }, [delay]);
14
}

URL が変更されたときのみログを出せる。useEffectEvent を利用しない場合、items が変更された場合にもログが出てしまう。

1
function Page({ url }) {
2
  const { items } = useContext(ShoppingCartContext);
3
  const numberOfItems = items.length;
4

5
  const onVisit = useEffectEvent((visitedUrl) => {
6
    logVisit(visitedUrl, numberOfItems);
7
  });
8

9
  useEffect(() => {
10
    onVisit(url);
11
  }, [url]);
12
}