title: React useCallback: useCallback is still re-rendering function each time
body: <p>I'm fairly new to the <code>useMemo</code> and <code>useCallback</code> hooks within react and I'm kind of stuck as to why my functions still continue to re-render even if the variable I'm checking against stays the same.  Currently I'm trying to build a google map that allows the user to turn on and off certain markers that are displayed on the map.  My functional component should only have to render these markers once on load and then memoize them after that since they are just being turned on/off afterwards.  Now I understand the concept that hooks such as these only do a shallow comparison, but I'm comparing boolean values which I would think these hooks would be able to understand.</p>
  <p>This is my current map file:</p>
  <pre><code>// constants are above
  
  function Map() {
  
      const {isLoaded} = useJsApiLoader({
          googleMapsApiKey: env.GOOGLE_MAPS_API.API_KEY,
          libraries: libs
      }) 
  
      const [map, setMap] = useState(null);
      const [places,setPlaces] = useState([]);
      const [places2,setPlaces2] = useState([]);
      const [heatMap,setHeatMap] = useState([]);
      const [fetchingData, setFetchingData] = useState(true);
      const [showPlaces,setShowPlaces] = useState(true);
      const [showPlaces2,setShowPlaces2] = useState(false);
      const [showHeatMap,setShowHeatMap] = useState(false);
  
      useEffect(() =&gt; {
          let mounted = true;
  
          if(mounted){
              socket.emit('getMapAnalytics', ([heatmap,places,places2]) =&gt; {
                  console.log({heatmap})
                  setPlaces(places);
                  setPlaces2(places2);
                  setHeatMap(heatmap);
                  setFetchingData(false);
              });            
          }
  
          return () =&gt; {
              mounted = false;
          }
      },[])
  
      const onLoad = useCallback((map) =&gt; {
          setMap(map);
      },[])
  
      const onUnmount = useCallback((map) =&gt; {
          setMap(null);
      },[]);
  
      const renderPlacesMarkers = useCallback(() =&gt; {
          console.log('rendering places')
          if(showPlaces){
              return places.map(place =&gt; (
                  &lt;Marker icon={icon} key={place.ID} title={place.Name} position={{lat:place.Latitude,lng:place.Longitude}}/&gt;
              ))
          }
          return null;
      },[showPlaces]);
  
      const renderPlaces2Markers = useCallback(() =&gt; {
          console.log('rendering places2')
          if(showPlaces2){
              return places2.map(place =&gt; (
                  &lt;Marker key={place.ID} title={place.ID} position={{lat:place.Latitude,lng:place.Longitude}}/&gt;
              ))
          }
          return null;
      },[showPlaces2]);
  
      const renderHeatMap = useCallback(() =&gt; {
          console.log('rendering heat map')
          if(showHeatMap){
              const mapData = heatMap.map(location =&gt; ({
                  location: new google.maps.LatLng(location.Latitude,location.Longitude), weight: location.population_density
              }))
  
              return (&lt;HeatmapLayer data={mapData} options={{gradient: gradient}} /&gt;)
          }
          return null;
      },[showHeatMap]);
  
      const onChecked = (e) =&gt; {
          switch(e.target.id){
              case 'places': setShowPlaces(e.target.checked);
                  break;
              case 'places2': setShowPlaces2(e.target.checked);
                  break;
              case 'heat-map': setShowHeatMap(e.target.checked);
                  break;
          }
      }
  
      return isLoaded &amp;&amp; !fetchingData ? (
          &lt;div id=&quot;map-container&quot;&gt;
              &lt;div id=&quot;top-bar&quot; style={{display: 'flex', justifyContent:'space-evenly'}}&gt;
                  &lt;div style={{display: 'flex'}}&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;places&quot; checked={showPlaces} onChange={onChecked}&gt;&lt;/input&gt;&lt;label&gt;techs&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div style={{display: 'flex'}}&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;places2&quot; checked={showPlaces2} onChange={onChecked}&gt;&lt;/input&gt;&lt;label&gt;kiosks&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div style={{display: 'flex'}}&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;heat-map&quot; checked={showHeatMap} onChange={onChecked}&gt;&lt;/input&gt;&lt;label&gt;heatmap&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={onLoad} onUnmount={onUnmount}&gt;
                  {renderPlacesMarkers()}
                  {renderPlaces2Markers()}
                  {renderHeatMap()}
              &lt;/GoogleMap&gt;
          &lt;/div&gt;        
      ) : &lt;Spinner margin=&quot;margin-25&quot;&gt;&lt;/Spinner&gt;
  }
  
  export default memo(Map);
  
  </code></pre>
  <p>I've tried setting the <code>useCallback</code> parameter to something else such as the array length of places and places2 but that still ended up re-rendering each function still.</p>
  <p>The only thing that I could think of that is making these methods re-render each time is because I'm returning an array of JSX elements, but I could not find good examples of this online.  If anyone could point me in the right direction to rightfully understand why this is happening, that would be great.  TIA!</p>