title: Is the 'React way' really to re-render the whole react-leaflet component regularly?
body: <p>I'm using <code>react-leaflet</code> to display a map with dynamic markers loaded from an API. Until now, I've been loading the Markers in the render, but I realised this was rendering unnecessarily re-rending the whole Leaflet Map each time anything changed (e.g. zoom, location). I think I can remove my zoom and location state and call native Leaflet functions for these, but ultimately I need to load my data after initial render, resulting a second unnecessary render in the very least. Is React really designed so that this is the preferred way?</p>
  
  <pre><code>function MyMap() {
    const [markers, setMarkers] = useState([]);
  
    useEffect(() =&gt; {
      console.log('useEffect');
  
      getMyData().then(a =&gt; {
        console.log('data load');
        setMarkers(a);
      });
    }, []);
  
    console.log('map render');
    return (
      &lt;Map id='map' className='map' center={[52, 0]} zoom={6}&gt;
        &lt;TileLayer
          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          attribution='&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
        /&gt;
        &lt;LayerGroup&gt;
          {markers.map(a =&gt; {
            return (
              &lt;Marker
                key={a._id}
                position={[a.location.latitude, a.location.longitude]}
                icon={myIcon}
              /&gt;
            );
          })}
        &lt;/LayerGroup&gt;
      &lt;/Map&gt;
    );
  }
  </code></pre>
  
  <p>Console output:</p>
  
  <pre><code>map render
  useEffect
  data load
  map render
  </code></pre>
  
  <p>I was tempted to fix this by dynamically adding markers in the normal Leaflet way:</p>
  
  <pre><code>L.marker([50.5, 30.5]).addTo(map);
  </code></pre>
  
  <p>but this appears non-trivial in <code>react-leaflet</code>. In looking for how to dynamically add Markers I came across React Leaflet: Add markers dynamically, specifically the <a href="https://stackoverflow.com/a/42848613">top answer</a> suggesting that shouldn't be done. The associated jsfiddle re-renders the whole map for each click. Perhaps that's fine?</p>