Async await api call inside useEffect being called twice

enter image description here

When i click on dropdown Button, it will trigger api calls and it works fine. However, if i click the dropdown Button again (without refresh the page), API calls(not the whole fetchData function but only the await cityAPIS calls ) will call twice(ideally it should only be called once.) Does anyone know why is this happening? PS. i didn't use React.strictMode.

  import CityApi from '@Api/CityApi';    export default function useFetchCityApi(    initState,    loadState,    imgDispatch,    selectCountry  ) {    useEffect(() => {      if (initState) {        return;      }      async function fetchData() {        imgDispatch({ type: 'FETCH_DATA', fetching: true });          let data = await CityApi(          loadState.load === 0 ? 0 : loadState.load - 30,          selectCountry        );          if (data === 'error') {          imgDispatch({ type: 'FETCH_DATA', fetching: true });          return;        }        imgDispatch({ type: 'STACK_IMAGE', data });      }      fetchData();    }, [loadState.load]);  }  

whole codebase: github codebase

https://stackoverflow.com/questions/66848287/async-await-api-call-inside-useeffect-being-called-twice March 29, 2021 at 11:05AM