ReactJsのuseEffect内で毎分API Callさせたいが、1分に1回以上Callしてしまっているのを解消したい

Question

現状

React.js(17.0.2)、TypeScript(4.2.4)で時計(Clock)Componentと電車情報を1分に1回00秒のときにAPIで取得するTrainTimeTableComponentをHooksで作っております。

以下、コードの主要部分のみ抜粋したものです。

function TrainTimeTable() {
  const [stationName, setStationName] = useState<string>();
  // 別のClockコンポーネントで毎秒timeを現在時刻に変更しています
  const { time } = useSelector((state: any) => state.timer);
  const now = DayJs(time);

    useEffect(() => {
      if (shouldRefetch()) { apiCall(); }
    }, [now]);

    const shouldRefetch = () => {
      return !stationName || now.format("ss") === "00"
    }

  const apiCall = async () => {
    // stationNameないとき(=最初のマウント時)と、秒が00のときに発火しています
    console.log("FETCH Train TimeTable", now);
    const response: any = await axios.get(EKISPART_API_BASE_URL,
      {
        params: {
          key: process.env.EKISPART_API_KEY,
          date: now.format("YYYYMMDD"),
        }
      })
    const data = response.data.ResultSet.TimeTable;
    setStationName(data.Station.Name);
  }

  return (
    <h1 className="text-xl">{stationName}駅の運行情報</h1>
  );
}

export default TrainTimeTable;

timeの更新を行っているコード

function Clock() {
  const { time } = useSelector((state: any) => state.timer);
  const dispatch = useDispatch();

  useEffect(() => {
    const timerId = setInterval(() => dispatch(tick(DayJs().format('YYYY/MM/DD HH:mm:ss'))), 1000);

    return () => clearInterval(timerId);
  });
  const now = DayJs(time);

  return (
    <p className="text-2xl text-thinGray">{now.format('YYYY/MM/DD')}</p>
  );
};

redux-toolkitを使っているのですが、timeの更新が1秒に1度のみ動いていることは以consoleで確認できましたと思われます。以下がdispatchで動かした関数にしこんだログです。

action! 2021/05/02 18:53:10 TimerSlice.tsx:18
action! 2021/05/02 18:53:11 TimerSlice.tsx:18
action! 2021/05/02 18:53:12 TimerSlice.tsx:18
...

課題

apiCall関数が、stationNameないとき(=最初のマウント時)と、秒が00のときに発火しています。
が、consoleをみると00秒のときに、複数回 console.log("FETCH Train TimeTable", now); が走ってしまっています。
期待しているのは、00秒のときに1度だけ発火することです。

聞きたいこと

上記の課題である、なぜ複数回apiCallが走ってしまっているのかについて、原因と解消方法を知りたいです。
ご存じの方がいらっしゃればご教示いただけると幸いです。

Comments

[hoshi-takanori]

time が 1 秒よりも短い間隔で更新されてるのでは。

[hoshi-takanori]

API の結果が 1 秒以内に返ってきて、setStationName で駅名が変わってればまた発火すると思いますが、駅名が同じなら発火しないはずですよね…。
あと、Clock の useEffect の第 2 引数に [] を指定した方がいいような。(API の発火とは関係ありませんが。)

[hatsu]

> Clock の useEffect の第 2 引数に [] を指定した方がいいような。(API の発火とは関係ありませんが。)
たしかにですね。修正しました。

>setStationName で駅名が変わってればまた発火すると思いますが、駅名が同じなら発火しないはずですよね…。
ですよね。。shouldRefetch()関数は基本1秒に1回実行されていますが、apiCall()が実行されたときだけ複数回実行されているようです。これがなにかヒントになりますかね、、、

[hoshi-takanori]

TrainTimeTable に他にも state があったりしませんか？
あと、const now = DayJs(time); ですが、time が同じでも　now は別のオブジェクトになると思うので、useEffect の第 2 引数は [time] にして、now は useEffect のクロージャの中で作った方がいいかも。

[hatsu]

> TrainTimeTable に他にも state があったりしませんか？
はい、他にもstateが存在します。

> const now = DayJs(time); ですが、time が同じでも　now は別のオブジェクトになると思うので、useEffect の第 2 引数は [time] にして、now は useEffect のクロージャの中で作った方がいいかも。

第2引数timeにしたら正常に1度のみ動くようになりました。ありがとうございます！