Reactjs 为什么 React 会多次调用我的应用程序的某些函数

我正在调试一款Reaction应用程序，注意到我的一些函数被多次调用，我无法解释.

我最初认为这是某种"开发人员功能"，并try 运行构建，如果不应该调用的API被调用一次而不是两次，我所能看到的就是:

import { useCallback, useState } from "react";

function App() {
  const cities = ["montreal", "london", "shanghai"];

  const [city, setCity] = useState(cities[0]);

  const getCityParameter = useCallback(
    (newCity) => {
      console.log("[1] getCityParameter");
      console.log(`newCity: ${newCity}`);
      console.log(`city: ${city}`);
      return (newCity ?? city).toUpperCase();
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [city]
  );
  const [cityParameter, setCityParameter] = useState(getCityParameter());

  const handleChange = useCallback(
    (event) => {
      const newCity = event?.target.value;
      console.log("handleCityChange");
      console.log(`newCity: ${newCity}`);
      if (newCity !== undefined) {
        setCity(newCity);
      }
      const newCityParameter = getCityParameter(newCity);
      setCityParameter(newCityParameter);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [city]
  );

  return (
    <>
      <select onChange={handleChange} value={city}>
        {cities.map((city) => {
          return (
            <option value={city} key={city}>
              {city}
            </option>
          );
        })}
      </select>
      <div>{cityParameter}</div>
    </>
  );
}

export default App;

我在这里创建了这个代码沙箱:https://codesandbox.io/s/restless-butterfly-brh7fk?file=/src/App.js

如果清除控制台日志(log)并更改下拉列表，您会注意到getCityParameter被调用了3次，而我预计它只会被调用一次.

这似乎是一个相当低级的react 功能，我为这个"不那么小"的例子道歉--这是我能想到的最好的重现行为的方法.

有谁能解释一下吗？