let’s look this code:
app.tsx

import "./App.css";
import useHome from './hooks/useHome';

function App() {
  useHome();
  return <></>;
}

export default App;

hooks/useHome.ts

import { useEffect, useState } from "react";

const query = (): Promise<number> =>
  new Promise((resolve) =>
    setTimeout(() => {
      resolve(1);
    }, 1000),
  );

const useHome = () => {
  const [pageStatus, setPageStatus] = useState<string>("loading");
  const [data, setData] = useState<number | null>(null);
  const [deps, setDeps] = useState(data);

  const queryData = async () => {
    setPageStatus("loading");
    try {
      const pageData = await query();
      setData(pageData); // cause second render
      setPageStatus("normal"); // cause third render
    } catch (e) {
      setPageStatus("error");
    }
  };

  useEffect(() => {
    queryData(); 
  }, []);

  useEffect(() => {
    setDeps(data); // cause third render 
  }, [data]);

  console.log("@render"); // total 3 times

  return {
    deps,
    data,
    pageStatus,
  };
};

export default useHome;

why ‘@render’ only console.log 3 times?
I expected it render 4 times;
render first at init,
render second because of setData
render third because of setPageStatues ( async function environment here )
render forth because of setDeps
but I find it only console 3 times…
Is react merged the setPageStatues and setDeps ?