axiosで取得したデータをsetStateする際にバッチ処理がされず、何度もレンダリングされてしまう

Question

ソースコード

import axios from "axios";
import { useEffect, useState, memo } from "react";
import { useHistory } from "react-router-dom";
import ChoiceModal from "./ChoiceModal";

const StopLog = memo((props) => {

// 質問に関するプログラム　→
  console.log('StopLog'); //　①
  let history = useHistory();

  const [id, setId] = useState();
  const [name, setName] = useState();
  const [color, setColor] = useState();
  const [startTime, setStartTime] = useState();

  useEffect(() => {
    axios.get("http://localhost:3001/logs",
      {
        headers: {accessToken: localStorage.getItem("accessToken")}
      }
    ).then((res) => {
      if (res.data.isInvalid) {
        history.push("/login");
      } else {
        setId(res.data[0].id);
        setName(res.data[0].item_name);
        setColor(res.data[0].color);
        const timeData = res.data[0].start_time.split(',');
        setStartTime(
          new Date(timeData[0], timeData[1]-1, timeData[2], timeData[3], timeData[4])
        );
      }
    });
  }, [history]);

　　　　// ②
  console.log(id);
  console.log(name);
  console.log(color);
  console.log(startTime);
// ← 質問に関するプログラム

  const stop = () => {
    const stopTime = new Date();
    const year = stopTime.getFullYear();
    const month = stopTime.getMonth()+1;
    const date = stopTime.getDate();
    const hours = stopTime.getHours();
    const minutes = stopTime.getMinutes();
    const newMinutes = minutes+2-(minutes+2)%5;
    const time = `${year},${month},${date},${hours},${newMinutes}`;

    if (new Date(year, month-1, date, hours, newMinutes) - startTime === 0) {
      axios.delete(`http://localhost:3001/logs`,
        {
          data: {
            id: id
          }
        }
      ).then((res) => {
        props.changeIsStopLog();
        props.changeIsDoing();
      });
    } else {
      axios.patch(`http://localhost:3001/logs/${id}/stop`,
        {
          finish_time: time
        },
        {
          headers: {accessToken: localStorage.getItem("accessToken")}
        }
      ).then((res) => {
        if (res.data.isInvalid) {
          history.push("/login");
        } else {
          props.changeIsDoing();
          props.changeIsStopLog();
        }
      });
    }
  }

  return (
    <ChoiceModal
      isOpen={props.isStopLog}
      title="記録を終了しますか？"
      no="キャンセル"
      yes="終了"
      isIcon={true}
      name={name}
      color={color}
      yesEvent={stop}
      cancel={props.changeIsStopLog}
    />
  );

})

export default StopLog;

質問内容

上記ソースコードの「質問に関するプログラム」部分では、コンポーネントが初回レンダリングされた際、useEffectが実行されてaxiosによりサーバーからデータを取得し、そのデータで4つのstateid, name, color, startTimeを更新する処理を行なっています。
この処理の動作を上記ソースコードの①と②のコンソール出力により確認したところ、以下のように出力されました。

StopLog
undefined
undefined
undefined
undefined
StopLog
「id」の中身
undefined
undefined
undefined
StopLog
「id」の中身
「name」の中身
undefined
undefined
StopLog
「id」の中身
「name」の中身
「color」の中身
undefined
StopLog
「id」の中身
「name」の中身
「color」の中身
「startTime」の中身

よって、setState関数が1つ実行されるたびにレンダリングされていることがわかります。
何故バッチ処理されず、このような動作になるのでしょうか？
4つ全てのsetState関数が実行された後、レンダリングされるようにし、以下のようなコンソール出力が表示されるようにしたいです。

StopLog
undefined
undefined
undefined
undefined
StopLog
StopLog
「id」の中身
「name」の中身
「color」の中身
「startTime」の中身

Comments

[hoshi-takanori]

id, name, color, tartTime を別々に　useState するのではなく、一つのオブジェクトにまとめて一回だけ useState (または useReducer) すると良いようですね。
https://ja.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

[Kino104]

ありがとうございます。参考にさせていただきます。

Answer 1

4つ全てのsetState関数が実行された後、レンダリングされるようにし、以下のようなコンソール出力が表示されるようにしたいです。

なぜそうしたいのでしょうか。どこまでの値を使ってレンダリングを行うかはReactの都合で決まるものであって、レンダリング関数が何度実行されるかについては何の保証もありません。

Comments

[maisumakun]

useEffectのコールバックについては、どのタイミングで実行されるかの保証があります。

[Kino104]

レンダリングの回数が少ない方がパフォーマンスも上がるのでは？と思っていたのですが、このままでも全然問題ないのでしょうか？

[maisumakun]

問題ないというより、打てる手はない、というほうが正しいです。