title: react-leaflet, markers re-render when the popup is opened/closed
body: <p>The problem is that every time I hover on a marker a popup is opened or closed and it causes all the markers to re-render even though my state is not changing. <code>console.log(myState);</code> is running every time I hover in and out of the marker.</p>
  
  <p>I tried to use useMemo hook but couldn't figure out how to use it on <code>country.map</code>. Any help?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { useEffect, useState } from 'react';
  import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
  import axios from 'axios';
  import { v4 as uuidv4 } from 'uuid';
  import { Icon } from 'leaflet';
  
  const myicon = new Icon({
    iconUrl: './icon.svg',
    iconSize: [20, 20]
  });
  
  const MyMap = () =&gt; {
    const [myState, setMyState] = useState(null);
    const [activePlace, setActivePlace] = useState(null);
  
    const getData = async () =&gt; {
      let response = await axios
        .get('https://corona.lmao.ninja/v2/jhucsse')
        .catch(err =&gt; console.log(err));
  
      let data = response.data;
      setMyState(data);
  
      // console.log(data);
    };
  
    useEffect(() =&gt; {
      getData();
    }, []);
  
    if (myState) {
      console.log(myState);
      return (
          &lt;Map
            style={{ height: '100vh', width: '100vw' }}
            center={[14.561, 17.102]}
            zoom={1}
          &gt;
            &lt;TileLayer
              attribution='&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors &amp;copy; &lt;a href="https://carto.com/attributions"&gt;CARTO&lt;/a&gt;'
              url={
                'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
              }
            /&gt;
  
            {myState.map(country =&gt; {
              return (
                &lt;Marker
                  key={uuidv4()}
                  position={[
                    country.coordinates.latitude,
                    country.coordinates.longitude
                  ]}
                  onmouseover={() =&gt; {
                    setActivePlace(country);
                  }}
                  onmouseout={() =&gt; {
                    setActivePlace(null);
                  }}
                  icon={myicon}
                /&gt;
              );
            })}
  
            {activePlace &amp;&amp; (
              &lt;Popup
                position={[
                  activePlace.coordinates.latitude,
                  activePlace.coordinates.longitude
                ]}
              &gt;
                &lt;div&gt;
                  &lt;h4&gt;Country: {activePlace.country}&lt;/h4&gt;
                &lt;/div&gt;
              &lt;/Popup&gt;
            )}
          &lt;/Map&gt;
      );
    } else {
      return &lt;div&gt;Nothing&lt;/div&gt;;
    }
  };
  
  export default MyMap;
  
  </code></pre>