Description
Hello people,
I might have ran into some kind of limiting factor regarding this library in connection with rendering, or rather the un-rendering a larger amount of markers.
The problem is that it takes a very long tim (about 10 seconds) for React to re-render when transitioning between state 1 to 2.
State #1
~1000 pretty simple and straight forward javascript objects are held in a state key in my React component. Each of them are also rendered into the DOM by React like so:
const infoWindow = (this.props.infoWindows.includes(marker.id)) ? this.renderInfoWindow(ref, marker, i) : null;
return (
<Marker
{...marker}
position={marker.position}
icon={buildIconObject(marker.type, marker.state)}
key={i}
ref={ref}
onClick={this.props.handleMarkerClick.bind(marker, marker.id)}
infoWindow={infoWindow}>
</Marker>
)
State #2
About 20 javascript objects rendered in the same way as the above.
For some reason it takes forever (about 10 seconds) to set the new state object:
this.setState({
markers: newMarkers, // replacing the array of ~1000 markers with ~20
})
I have tried to remove everything except the position key from the marker component to se if there was some kind of problem, but it didn't help at all. I have also tried dropping the <Marker /> altogether and instead plot the markers with Google's components directly and then use marker.setMap(this._googleMapComponent.props.map) to render it into the DOM. This solved the problem, I think, since the delay was gone. However, that might be because I didn't remove them from the DOM when the React state was changed. That might be clue as to what's going on.
In essence, my question is, why does the removing all these markers seem to take such a long time?
Does this sound familiar or spark any ideas?