using multiple useEffect in order. fetching API after fetching the location

Question

this is my first time using react. im working on a basic weather app. i have a problem with using multiple useEffect hook in order. i need to fetch both the geolocation and then the weather APP api in order when the page load. but i the location keep returning null, here's the code

  useEffect(()=>{
  navigator.geolocation.getCurrentPosition((position) => {
    setLatitude(position.coords.latitude)
    setLongitude(position.coords.longitude)
  });
},[])

useEffect(()=> {
  axios.get(`${api.base}weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${api.key}`).then
  ((response) => {
    console.log(response.data)
  })

},[])

any solution will be appreciated. thank you

Answer 1

For this you could make the second useEffect dependent on your latitude and longitude states:

   useEffect(()=>{
    
    axios.get(`${api.base}weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${api.key}`).then
     ((response) => {
         console.log(response.data)
      })

   },[latitute, longitude])

This will call the useEffect every Time the latitude or longitude states have changed.