【React】無駄なレンダリングをされないようにしたい

現在openweatherのAPIを使って一週間分の天気を取得したいと考えてます。

検索バーで地域名を入力するとその地域の天気を取得することに成功したのですが、
検索バーで一文字でも入力するとレンダリングが走ってしまい、 console.logが出力されてしまいます。

理想は検索ボタンをした時だけレンダリングするようにしたいのですが、なぜレンダリングが走ってしまうのかが
分からない状況です。。。

ご教授いただけると幸いです。

React
1
2const SearchArea = () => {
3  const dispatch = useDispatch();
4  let cityLocation = useSelector(selectCity);
5  const APIKEY: any = process.env.REACT_APP_GOOGLE_API_KEY;
6  const APIKEY_GEOCODE: any = process.env.REACT_APP_WEATHER_API_KEY;
7  const [city, setCity] = useState("");
8  const [latstate, setLatstate] = useState(35.6761919);
9  const [lngstate, setLngstate] = useState(139.7690174);
10  const [weather, setWeather] = useState([]);
11  let today = new Date();
12  let month = today.getMonth() + 1;
13  let day = today.getDate();
14
15  const weatherData = async (e: any) => {
16    dispatch(setLocationCity(city));
17    Geocode.setApiKey(APIKEY);
18    Geocode.fromAddress(city).then(
19      async (response) => {
20        const { lat, lng } = response.results[0].geometry.location;
21        setLatstate(lat);
22        setLngstate(lng);
23
24        await axios
25          .get(
26            `http://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lng}&lang=ja&appid=${APIKEY_GEOCODE}`
27          )
28
29          .then((response) => {
30            const data: any = response.data;
31            setWeather(data);
32            console.log(weather);
33            console.log("status:", response.status);
34          })
35          .catch((err) => {
36            console.log("err:", err);
37          });
38      },
39      (error) => {
40        alert("error");
41      }
42    );
43
44    e.preventDefault();
45    if (city === "") {
46      alert("値を追加してください");
47    } else {
48      console.log(city);
49
50      setCity("");
51    }
52  };
53
54  const containerStyle = {
55    width: "400px",
56    height: "250px",
57    margin: "0 auto",
58  };
59
60  const center = {
61    lat: latstate,
62    lng: lngstate,
63  };
64
65  return (
66    <>
67      <div className={styles.container}>
68        <div className={styles.form_container}>
69          <form action="">
70            <input
71              type="text"
72              name="city"
73              placeholder="東京"
74              value={city}
75              onChange={(e) => setCity(e.target.value)}
76              className={styles.valuefield}
77            />
78            <button
79              className={styles.submit_btn}
80              onClick={(e) => weatherData(e)}
81            >
82              検索
83            </button>
84          </form>
85        </div>
86
87        <div className={styles.map_container}>
88          <LoadScript googleMapsApiKey={APIKEY}>
89            <GoogleMap
90              mapContainerStyle={containerStyle}
91              center={center}
92              zoom={13}
93            ></GoogleMap>
94          </LoadScript>
95        </div>
96      </div>
97      <div className={styles.weather_area}>
98        <div className={styles.display_left}>
99          <p className={styles.today_time_title}>
100            {month + "月" + day + "日"} <span>現在時刻</span>
101          </p>
102          <p className={styles.area_title}>{cityLocation}</p>
103
104          {weather && (
105            <>
106              <DisplayWeather data={weather} />
107            </>
108          )}
109        </div>
110        <div className={styles.display_right}>
111          <Chart data={weather} />
112        </div>
113      </div>
114    </>
115  );
116};