React, Get Weather Aync Await Errors - reactjs

Question

Still teaching myself React, and was working on a project when I ran into an issue.
I have the below code.
const Weather = (props) => {
const [weather, setWeather] = useState([]);
const [lat, setLat] = useState([]);
const [long, setLong] = useState([]);
useEffect(() => {
const fetchData = async () => {
navigator.geolocation.getCurrentPosition(function (position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&appid=SomeID&units=imperial&exclude=minutely`
)
.then((res) => res.json())
.then((result) => {
setWeather(result);
console.log(result);
});
};
fetchData();
}, [lat, long]);
return (
<React.Fragment>
<div className={styles.weather}>
<div className={styles.weather__current}>{weather.current.temp}</div>
<div className={styles.weather__hourly}>Hourly</div>
<div className={styles.weather__daily}>5 Day</div>
</div>
</React.Fragment>
);
};
export default Weather;
My issue is that my request goes out twice before it has the lat and long "populated", on the third attempt it goes out just fine. So I get 2 responses of bad request, with the third being what I want.
My understanding is that in an Async function, the await, will "pause" until all previous variables are "satisfied". I may be misunderstanding that.
I can "hard code" the values, and everything is fine.
Any help would be appreciated.

Answer 1

The issue is that you are setting two of the useEffect's dependency inside the useEffect function itself (lat and long). You need to separate your useEffect into two separate ones: the first to fetch lat and long, the second to fetch the weather.
useEffect(() => {
navigator.geolocation.getCurrentPosition(function (position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
}, []);
useEffect(() => {
fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&appid=SomeID&units=imperial&exclude=minutely`)
.then((res) => res.json())
.then((result) => {
setWeather(result);
console.log(result);
});
}, [lat, long]);
Alternatively, since you are not rendering lat and long, you could just make them normal variables, not state variables:
useEffect(() => {
navigator.geolocation.getCurrentPosition(function (position) {
const lat = position.coords.latitude);
const long = position.coords.longitude);
fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&appid=SomeID&units=imperial&exclude=minutely`)
.then((res) => res.json())
.then((result) => {
setWeather(result);
console.log(result);
});
});
}, []);

Answer 2

Your request is going twice because you are setting lat and long states before setting the weather and as you know everytime you set/change a state in a component, react updates it again.
The solution is to use useRef hook instead of useState for lat and long. You can also use const variable to store temporarily if not using these values anywhere else.