react-google-maps hooks and getBound() - reactjs

Question

I'm building an application that update the markers each time the user move the map.
I'm using the method onBoundChanges to get the bounds and store them in a hooks (setBounds(mapBounds).)
Unfortunately when I try to store it in a hook with setBounds(mapBounds), its sends the application in a loop.
Do you have any idea how to get around the problem?
Thank you
Here is my main function
import React, { useState, useEffect, Fragment } from "react";
import {
GoogleMap,
LoadScript,
Marker,
InfoWindow,
} from "#react-google-maps/api";
const containerStyle = {
Display: "flex",
height: "100vh",
width: "100%",
};
const divStyle = {
background: `white`,
border: `1px solid #ccc`,
padding: 15,
};
const onLoad = (infoWindow) => {
console.log("infoWindow: ", infoWindow);
};
const position = {
lat: 43.6532,
lng: -79.3832,
};
const center = {
lat: 43.6532,
lng: -79.3832,
};
function ReactMap() {
const [selected, setSelected] = useState(null);
const [bounds, setBounds] = useState(center);
const mapRef = React.useRef();
const onMapLoad = React.useCallback((map) => {
mapRef.current = map;
}, []);
const onMapBoundsChanged = React.useCallback((map) => {
const latlongchange = mapRef.current.getBounds();
const lat = latlongchange.Ua.i;
const lng = latlongchange.Ua.j;
const mapBounds = {
lat: lat,
lng: lng,
};
//setBounds(mapBounds);
console.log(mapBounds);
}, []);
return (
<Fragment>
<LoadScript googleMapsApiKey="">
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
onLoad={onMapLoad}
onBoundsChanged={onMapBoundsChanged}
zoom={14}
>
{selected ? (
<InfoWindow
onLoad={onLoad}
position={position}
onCloseClick={() => {
setSelected(null);
}}
>
<div style={divStyle}>
<h1>La place</h1>
</div>
</InfoWindow>
) : null}
<Marker
className="marker"
position={position}
name="My Marker"
color="blue"
onClick={() => {
setSelected(true);
}}
/>
</GoogleMap>
</LoadScript>
</Fragment>
);
}
export default ReactMap;

Answer 1

Ok. May be you should use additional hook for debouncing? For example:
Step 1: Hook useDebouncedCallback.js
import { useEffect, useRef } from 'react'
export function useDebouncedCallback(callback, wait) {
const argsRef = useRef()
const timeout = useRef()
function cleanup() {
if (timeout.current) clearTimeout(timeout.current)
}
useEffect(() => cleanup, [])
return function debouncedCallback(...args) {
argsRef.current = args
cleanup()
timeout.current = setTimeout(() => {
if (argsRef.current) callback(...argsRef.current)
}, wait)
}
}
Step 2: Your React.FC
// ...
import { useDebouncedCallback } from '#/common/hooks/useDebouncedCallback'
function ReactMap() {
// ...
const onMapBoundsChangedDebounced = useDebouncedCallback(onMapBoundsChanged, 500)
return (
<Fragment>
<LoadScript googleMapsApiKey="">
<GoogleMap
// ...
onBoundsChanged={onMapBoundsChangedDebounced}
// ...
>
Step 3: use constant center as initial state (not empty array)
const position = {
lat: 43.6532,
lng: -79.3832,
};
const center = {
lat: 43.6532,
lng: -79.3832,
};
function ReactMap() {
const [selected, setSelected] = useState(null);
const [bounds, setBounds] = useState(center);
// ...