How do I make a use effect run before another while using an API in react.js

Question

The purpose of this project is to dynamically get the coordinates and bounds from a map API and use its values to get the data of places attached to that area

The situation I have is that on my app.js I have two use effects:

the first is to get the user's location after the window is loaded this makes it possible for the map API to work.

the second is to get the data from a different API based on the bounds gotten from the map.

const App =() => { const [places, setPlaces]= useState([]); const [coordinates, setCoordinates] = useState({lat: 0, lng: 0}); const [bounds, setBounds]= useState(null);

     useEffect(()=>{
         let mounted = true;
         window.addEventListener('load', (event) => { 
         navigator.geolocation.getCurrentPosition(({ coords: {latitude, longitude} }) => {
             if (mounted){
             setCoordinates({ lat: latitude, lng: longitude });
             }
         },(err)=> {
             console.warn(`ERROR(${err.code}): ${err.message}`);
           },{maximumAge:60000, timeout:5000, enableHighAccuracy:true});
           console.log('page is fully loaded');
         });
         return ()=>{
             mounted = false;
         }
     }, []);

     useEffect(() => {

         console.log(coordinates, bounds); 
         let isApiSuscribed= true;
         getPlacesData(bounds.sw, bounds.ne)//I am trying to get the API data using this
          .then((data) => {

              if (isApiSuscribed){
              console.log(data);

              setPlaces(data);
              }
          });
          return ()=>{
              isApiSuscribed=false;
          }
     }, [coordinates,bounds]);

     return(
         <>
             <CssBaseline />
             <Header />
             <Grid container spacing={3} style={{width:'100%'}}>
                 <Grid item xs={12} md={4}>
                     <List places={places}/>
                 </Grid>
                 <Grid item xs={12} md={8}>
                     <Map
                         setCoordinates={setCoordinates}
                         setBounds = {setBounds}
                         coordinates ={coordinates}
                     />
                 </Grid>
             </Grid>
         </>
     )
 }
 export default App;

The Challenge is that if I do not call the bounds.sw, bounds.ne parameters in the getPlacesData() function my Locally hosted page would run showing the appropriate Map and other components but the data that I need to fetch from the other API would not work.

And when I then call the bounds.sw, bounds.ne parameters in the getPlacesData() function then nothing is rendered on the screen and I get the following error codes: Error Message

this is the code for the API that is to return the data back

import axios from 'axios';

const URL ='https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary';



export const getPlacesData = async (sw, ne) => {
  try {
    const { data: { data } } = await axios.get(URL, {
      params: {
        bl_latitude: sw.lat,
        bl_longitude: sw.lng,
        tr_longitude: ne.lng,
        tr_latitude: ne.lat,
      },
      headers: {
        'x-rapidapi-key': process.env.REACT_APP_RAPID_API_TRAVEL_API_KEY,
        'x-rapidapi-host': 'travel-advisor.p.rapidapi.com',
      },
    });

    return data;
  } catch (error) {
    console.log(error);
  }
};

Please what do I do?

Justin Joy · Accepted Answer · 2022-05-04 02:54:48Z

2

It would be better if you could chain these operations instead of two disconnected useEffects. Try calling the getPlacesData function where you're now changing the state using setCoordinates, inside the first useEffect.

I would also recommend extracting this out into a custom hook to make the code cleaner.

As a side note, you might not actually need window.addEventListener since this component will already have mounted when the first useEffect is triggered.

answered May 4, 2022 at 2:54

Justin Joy

4034 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Esther Iyege Over a year ago

it did not work still

Collectives™ on Stack Overflow

How do I make a use effect run before another while using an API in react.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related