search

google-map-react / old-examples

Examples for google-map-react component.
http://google-map-react.github.io/google-map-react/map/main/
357 stars 316 forks source link

unnecessary renders caused by marker? #34

Open ckalas opened 6 years ago

ckalas commented 6 years ago

I draw a bunch of markers into my map, each marker is just some simple svg shapes. When I inspect it in react tools it appears to be rerendering the markers and hence the map when I mouse over the marker area. At the moment I only have a handful of markers but when its in production it will have siginficantly more and I am trying to understand the reason behind it rerendering.

Even if BasicMarker just renders a div with static text it is rerendering.

<GoogleMap center={ {lat: 31.299, lng: 120.5853} } zoom={8}> {value.map(c => <BasicMarker key={c.lat.toString() + c.lon.toString()} text={""} lat={c.lat} lng={c.lon} />)} </GoogleMap>

dave4jr commented 5 years ago

@ckalas I'm seeing the same issue.. Did you solve this by chance?

dave4jr commented 5 years ago

For anyone else who see this, the way I solved this was to use react PureComponent, which implements shouldComponentUpdate, which does a shallow comparison and only re-renders upon a change. This solved the issue for me.