react leaflet onMoveEnd cause error : "Maximum update depth exceeded"

Question

I have the following code to perform a state update every time the map move.

 function updateMap() {
    const b = mapRef.current.leafletElement.getBounds()
    const zoomm = mapRef.current.leafletElement.getZoom()
    const initBound = [b.getSouthWest().lng, b.getSouthWest().lat, b.getNorthEast().lng, b.getNorthEast().lat]

    setZoom(zoomm)
    setBound(initBound)
  }

bellow is the Map Component, I also tried the onMoveEnd event

<Map onViewportChanged={updateMap}/>

it is working fine for couple of moves however sometime especially if I kept moving the map it freezes and I get the Maximum update depth exceeded error .

can someone please explain the reason, is it a bug on react Leaflet or am I doing something wrong?

You need to run this at the END of your move, not DURING your move. — Kasey Chang, May 18 '20 at 23:04

score 0 · Answer 1 · answered May 12 '20 at 14:11

You get that error because you're updating state on every move, and in react you can update the state just for a limited number of times to prevent infinite loops for example.

One way to solve the problem is to debounce the updateMap method.

Check this link to look at different ways of performing the debouncing.

I hope this helps!

react leaflet onMoveEnd cause error : "Maximum update depth exceeded"

1 Answers1