顧客が本当に欲しかったのは、useEffectEvent ではなく useCallbackEvent だったのでは？

1import { useCallback, useImperativeHandle, useRef } from "react";
2
3// Update the behavior of a function without changing its instance
4export function useCallbackEvent<T extends (...args: unknown[]) => unknown>(
5  callback: T
6) {
7  const property = useRef<{ callback: T }>(null);
8  useImperativeHandle(property, () => ({ callback }));
9  return useCallback((...args: Parameters<T>) => {
10    if (!property.current) throw "callback is null";
11    return property.current.callback(...args);
12  }, []);
13}

1"use client";
2import { useEffect, useState } from "react";
3import { useCallbackEvent } from "./libs/use-callback-event";
4
5const Page = () => {
6  const [valueA, setValueA] = useState(10);
7  const [valueB, setValueB] = useState(20);
8  const [answer, setAnswer] = useState(0);
9
10  // valueA,valueBを更新しつつ、関数のインスタンスは変えない
11  const handleAnswer = useCallbackEvent(() => {
12    setAnswer(valueA + valueB);
13  });
14
15  // handleAnswerのインスタンスは変更されないので、useEffectのコールバックはvalueA,valueBを更新しても呼ばれない
16  useEffect(() => {
17    const t = setInterval(() => {
18      handleAnswer();
19    }, 1000);
20    console.log("effect");
21    return () => clearInterval(t);
22  }, [handleAnswer]);
23
24  return (
25    <div className="p-4">
26      <div>
27        A:
28        <input
29          className="outline p-1"
30          type="number"
31          value={valueA}
32          onChange={(e) => setValueA(Number(e.target.value))}
33        />
34      </div>
35      <div>
36        B:
37        <input
38          className="outline p-1"
39          type="number"
40          value={valueB}
41          onChange={(e) => setValueB(Number(e.target.value))}
42        />
43      </div>
44      <div>Answer:{answer}</div>
45    </div>
46  );
47};
48
49export default Page;