unnecessary renders caused by marker?

[ckalas]

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]

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

[dave4jr]

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.