title: Rendering more than 1000 markers in react-leaflet takes ages and user experience is horrible, need to improve my approach
body: <p>I have an array of 1000 min to 5000 max points to draw on my react-leaflet map. So my render function in the map component looks similar to:</p>
  
  <pre><code>renderMarkers = () =&gt; {
      return markers.map(
          (marker) =&gt; {
              return &lt;Marker key={`${marker.id}`} position={[marker.lt, marker.lg]} &gt;&lt;/Marker&gt;
          }
      )
  }
  
  render() {
      &lt;Map&gt;
          {this.renderMarkers()}
      &lt;/Map&gt;
  }
  </code></pre>
  
  <p>My problem is that it takes normally 1 sec to 3 secs to render the html on the map and the user experience is horrible, since the window blocks a bit now and then when the map moves.</p>
  
  <p>Is there anyway to divide all markers rendering in sections or let the window load that javascript async or show a loading icon while the map function runs?</p>
  
  <p>Even if there is a better approach that the one that I am doing, would be great to know.</p>
  
  <p>Thanks in advance</p>
  
  <p>EDIT: does not have to do anything with clustering since it is already clustering the markers, has to do with showing somehow to the user that the javascript is running so he needs to wait, or render async so the map flows.</p>