title: Why is Leaflet so slow at pan and zoom inside React?
body: <p>I have a fairly simple application that renders around 3000 points using leaflet.js. It renders fairly quickly but pan and zoom are terribly slow.</p>
  
  <p>Looking at the performance tools in chrome, it looks like most of the time is spend in recalculate styles, but that hasn't been helpful.</p>
  
  <pre><code>      &lt;LeafletMap
          center={[50, 10]}
          zoom={6}
          maxZoom={10}
          preferCanvas={true}
        &gt;
          &lt;TileLayer
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
          /&gt;
          {this.state.locations.map( (location, index) =&gt; {
              return (
                &lt;Marker position={[location.latitude, location.longitude]}&gt;
                  &lt;Popup&gt;
                    Popup for any custom information.
                  &lt;/Popup&gt;
                &lt;/Marker&gt; 
              )
          })}
      &lt;/LeafletMap&gt;
  </code></pre>