React-google-maps: lag - google maps no smooth dragging

[0x1bitcrack3r]

Dragging map is not smooth

I have been developing the application using react-google-maps from past 3 months. I didn't face this type of issue before i.e in the month of January.
Issue: There is a lag while dragging the map and it's too hard to drag the map when compare to google maps. FYI there are only 2 markers on the map.
Here is my code:

`
import React from 'react'
import { Actions } from 'jumpstate'
import { withGoogleMap, GoogleMap } from 'react-google-maps'
import { compose, lifecycle } from 'recompose'
import { get } from 'lodash'
const GoogleMapHoc = compose(
lifecycle({

componentWillMount(){
bounds: null,
markers: [],
onBoundsChanged: () => {
this.setState({
bounds: refs.map.getBounds(),
center: refs.map.getCenter()
})
let { onBoundsChange } = this.props
if (onBoundsChange) {
onBoundsChange(refs.map)
}
}
}
}),
withGoogleMap
)(props => (
ref={props.onMapMounted}
defaultZoom={8}
center={props.center}
{...props}
onBoundsChanged={props.onBoundsChanged}
>
{props.children}

))
export default GoogleMapHoc
`
Because of onBoundsChanged the smooth dragging is missing.

[0x1bitcrack3r]

Resolved the issue:
with lodash.debounce

onBoundsChanged: debounce(
() => {
this.setState({
bounds: refs.map.getBounds(),
center: refs.map.getCenter()
})
let { onBoundsChange } = this.props
if (onBoundsChange) {
onBoundsChange(refs.map)
}
},
100,
{ maxWait: 500 }
)

[0x1bitcrack3r]

implementation of debounce effecting the setState() in production.

[tuccle22]

the onBoundsChanged prop is called too often is likely the problem. You should be using the onIdle prop, which gets called when the map is settled. With onIdle you shouldn't need any debouncing function.