API call infinite loop in React

Question

I'm currently trying to pass in a location for forward geocoding and can't figure out why my call seems to be triggering an infinite loop.

I'm trying to pass in the locations using a map and then use the response from the API elsewhere in my code.

Here's my data provider...

import React, {
  useEffect,
  useState
} from "react"

export const GeoCodeContext = React.createContext()

export const GeoCodeProvider = (props) => {
  const [latLong, setLatLong] = useState([])

  const getLatLong = (location) => {

    return fetch(`https://api.opencagedata.com/geocode/v1/json?q=${location}&key=MYKEY&limit=1`)
      .then(res => res.json())
      .then(setLatLong)
  }

  return (
    <GeoCodeContext.Provider value={{latLong,getLatLong}}>
    {props.children}
    </GeoCodeContext.Provider>
  )
}

Here's where the function is being called

import React, { useContext } from "react"
import {GeoCodeContext} from "./GeoCodeProvider"
import {LogContext} from "../divelog/DiveLogProvider"

export const MapRender = () =>{
    const {diveLogs} = useContext(LogContext)
    const {latLong, getLatLong} = useContext(GeoCodeContext)
    

    diveLogs.map(dl =>{
        //getLatLong(dl.location)
        //console.log(latLong) -- returns an endless log of api calls
    })

    

    return <h2>GeoCode Render</h2>
}

backtick · Accepted Answer · 2020-09-22 20:14:45Z

1

Every time your MapRender component renders, it calls getLatLong once for every dive log.

getLatLong ultimately triggers a call to setLatLong...

...which causes GeoCodeProvider to re-render...

...which causes MapRender (among other things) to re-render...

and we go back to the beginning of the loop.

Consider wrapping MapRender's call to getLatLong in a call to the useEffect hook to avoid triggering it every render.

answered Sep 22, 2020 at 20:14

backtick

2,79612 silver badges18 bronze badges

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

2 Comments

Midiman Over a year ago

Please try giving a [qualified] solution rather than reiterating the problem. 'wrapping MapRender's call to getLatLong...' is just not useful.

backtick Over a year ago

The OP "can't figure out why my call seems to be triggering an infinite loop." The answer explains why the infinite loop is happening and suggests what to do to avoid the problem, with a link to relevant documentation. I encourage you to propose an edit rather than critiquing the answer in the comments.

Collectives™ on Stack Overflow

API call infinite loop in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related