Search code examples
reactjsajaxselectdropdownantd

Ajax keeps on getting called even tho data is already displaying in dropdown resulting to website freezing

Just want some help on the cause of this issue. Im able to display the list of timezones in the dropdown but after that it keeps on calling the ajax making my website freeze.

Heres the dropdown enter image description here Heres the ajax enter image description here Heres where I call and set the timezones enter image description here Heres the select enter image description here

Solution

  • Reason

    your useEffect will be called on every render as it is not having any dependency.

    your component gets mounted -> useEffect is called -> you make API call -> set the state with API response -> trigger re-render -> now again your useEffect will get called.

    This cycle continues resulting in an infinite loop .

    Fix

    change your useEffect to

    useEffect(() => { ... }, [])

    Add the [] as the second argument for your useEffect so that it runs only when the component in mounted for the first time .