Ufdjrw

I'm building a React app in which many Markers are displayed on a react-google-maps map. The user can filter the Markers so that not all are displayed at once. Displaying 4000 Markers with a MarkerClusterer works fine. It takes a resonable amount of time to display them and the map is responsive afterwards.

My problem now occurs when I attempt to only display none or few Markers after I rendered 4000 before. The browser freezes and I can't do anything in the browser anymore. There is no infinite loop warning or error. The console displays nothing that could help me before the freeze.

The code to display the map component:

import React from 'react';
import compose, withProps, withHandlers from "recompose"
import withScriptjs, withGoogleMap, GoogleMap, TrafficLayer from "react-google-maps"
import connect from 'react-redux';

import MarkersList from './MarkersList';

const MarkerClusterer = require("react-google-maps/lib/components/addons/MarkerClusterer");

const Map = compose(
 withProps(
 googleMapURL: "https://maps.googleapis.com/maps/api/js?key=*******&callback=initMap",
 loadingElement: <div style= height: `100%` />,
 containerElement: <div style= height: `100vh` />,
 mapElement: <div style= height: `100%` />
 ),
 withHandlers(
 onMarkerClustererClick: () => (markerClusterer) => 
 const clickedMarkers = markerClusterer.getMarkers()
 console.log(`Current clicked markers length: $clickedMarkers.length`)
 console.log(clickedMarkers)
 
 ),
 withScriptjs,
 withGoogleMap
 )((props) => 
 <GoogleMap
 defaultZoom=5.76
 defaultCenter= lat: 49.4299758, lng: 14.0531568 
 mapTypeId="terrain"
 fullscreenControl=false
 >
 <TrafficLayer autoUpdate />
 <MarkerClusterer
 onClick=props.onMarkerClustererClick
 averageCenter
 enableRetinalIcons
 gridSize=60
 >
 props.isMarkerShown && <MarkersList/>
 </MarkerClusterer>
 </GoogleMap>

);

export default connect()(Map);

The MarkersList component:

import React from 'react';
import bindActionCreators from 'redux';
import connect from 'react-redux';
import Marker, InfoWindow from 'react-google-maps';

import markersActionCreators from './MarkersActions';

class MarkersList extends React.Component 
 componentDidMount() 
 if(this.props.markers.length === 0) 
 this.props.requestMarkers();
 
 

 render() 
 var listComponent = this.props.displayedMarkers.map((marker, index) => 
 <Marker 
 key=index
 position=lat: marker.currentPositionLat, lng: marker.currentPositionLng 
 onClick=() => this.props.onToggleOpen(index) 
 tracksViewChanges=false
 >
 this.props.isOpen && this.props.infoIndex === index &&
 <InfoWindow onCloseClick=() => this.props.onToggleOpen(index)>
 <div>
 <h6>Truck Id: marker.vehicleName</h6>
 <b>Registration Plate: marker.registrationNumber</b>
 <br/>
 <p>
 Position recorded on <i>marker.time</i> <br/>
 Engine is [marker.currentIgnitionState] <br/>
 Fuel Level: marker.currentFuelLevel L left <br/>
 Speed: marker.currentSpeed Km/h <br/>
 </p>

 </div>
 </InfoWindow>
 </Marker>
 );
 return <div>listComponent</div>;
 
;

export default connect(
 state => state.mainArea.markersReducer,
 dispatch => bindActionCreators(markersActionCreators, dispatch)
 )(MarkersList);

I ensured that displayedMarkers has the correct value after selecting something (in this case displayedMarkers changes from 4000 entries to 1). I stepped through my whole app to ensure that every value I calculate is correct when this unfortunate behaviour occurs. Furthermore the render method doesn't get called a second time before the freeze. The change from 4000 displayed Markers to 3999 or 3980 works as it should.

For a better overview of the app I made a CodeSandbox (it doesn't render anything because the api key and data is missing): https://codesandbox.io/s/v830m9p7ry?fontsize=14&view=editor

I'm new to react and redux and I really don't know what I should test or do next to find why this is happening.

Thanks in advance for any help!

EDIT: Added performance analysis. And also
this is displayed after the 30 second mark in the performance analysis.
It is rendering every marker and is removing them one by one.