React useEffect infinite loop fetch data axios

Question

I\'m getting an infinite loop with this code.

I\'ve been trying some of the solutions from another posts but they don\'t work.

locationAddress i

Answer 1

You are interating over the locationAddress array, calling the api and changing the same array inside the loop. This is causing the infinite loop. Why do you need to set the location address again? If you receive more information, put it in another array.

Answer 2

The reason behind that is your dependency array. Basically when axios call finished you are updating your dependencies with setCoordinates and setLocationAddress which triggers again the useEffect hook's callback.

If you replace [coordinates, locationAddress] with the setter functions [setCoordinates, setLocationAddress] then it will work as expected.

The solution which should work:

const [locationAddress, setLocationAddress] = useReducer(reducer, []);
const [coordinates, setCoordinates] = useState([]);

useEffect(() => {
    // ... removed definition for better representation in the answer

    fetchLocation();
}, [setCoordinates, setLocationAddress]);

You might have a warning message because of missing coordinates and locationAddress which you can disable with // eslint-disable-next-line react-hooks/exhaustive-deps comment one line before the dependency array.

I hope that helps!