title: React google maps re-render issue using onBoundsChanged
body: <p>I've got a project i'm working on where I use react google maps, however I've run into an issue where when I get the <code>onBoundsChanged</code> event and set state in the callback, it goes into a permanent loop of re rendering. I can only assume somehow that when the component re-renders after I call <code>setState</code>, it sets a new bounds and that will then re-trigger the callback and <code>setState</code> again, in form of an infinitely recursive loop.</p>
  
  <pre><code>import React from 'react'
  import { compose, withProps, withStateHandlers, withState, withHandlers } from "recompose";
  import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker
  } from"react-google-maps";
  import HouseDetails from './house/HouseDetails'
  const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");
  
  class Map extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        zoom: 15,
        bounds: null    
      }
      this.map = React.createRef()
      this.onBoundsChanged = this.onBoundsChanged.bind(this)
      this.onZoomChanged = this.onBoundsChanged.bind(this)
    }
    componentWillReceiveProps(test){
    }
    onBoundsChanged(){
      this.setState({bounds: this.map.current.getBounds()}, ()=&gt; console.log('update'))
      let bounds = this.map.current.getBounds()
      let realBounds = {lat:{west: bounds.ga.j, east: bounds.ga.l}, lon: {north: bounds.ma.j, south: bounds.ma.l}}
      console.log(realBounds) 
  
    }
    onZoomChanged(){
      this.setState({zoom: this.map.current.getZoom()})
    }
    componentDidUpdate(){
      console.log('hm')
    }
    render(){
      return (
      &lt;GoogleMap
          defaultZoom={15}
          ref={this.map}
          onZoomChanged={this.onZoomChanged}
          onBoundsChanged={this.onBoundsChanged}
          center={{ lat: 21.493468, lng: -3.177552}}
          defaultCenter={this.props.center}&gt;
      &lt;/GoogleMap&gt;
      )
    }
  }
  
  export default withScriptjs(withGoogleMap(Map))
  </code></pre>
  
  <p>The code for the component that re-renders to infinity is above, it doesn't bug out so as long as I don't <code>setState</code> in the <code>onBoundsChanged</code> function. Is there any way around this?</p>