Selaa lähdekoodia

Removed the gross React.memo logic from ClickMarkerMap

Kirk Trombley 5 vuotta sitten
vanhempi
commit
eaa69040a7
1 muutettua tiedostoa jossa 18 lisäystä ja 15 poistoa
  1. 18 15
      client/src/components/screens/GamePanel/ClickMarkerMap.jsx

+ 18 - 15
client/src/components/screens/GamePanel/ClickMarkerMap.jsx

@@ -1,14 +1,18 @@
 import React, { useRef, useEffect } from "react";
 /* global google */
 
-// avoid re-rendering with memo(..., () => true)
-// this reduces reusability of this component, but that's fine for this
-export default React.memo(({
-  onMarkerMoved
-}) => {
+export default ({ onMarkerMoved }) => {
   const mapDivRef = useRef(null);
+  const mapRef = useRef(null);
+  const markerRef = useRef(null);
+
   useEffect(() => {
-    const googleMap = new google.maps.Map(mapDivRef.current, {
+    if (mapRef.current) {
+      console.log("Attempted to re-run effect with existing Map");
+      return;
+    }
+    
+    mapRef.current = new google.maps.Map(mapDivRef.current, {
       center: { lat: 25, lng: -25 },
       zoom: 0,
       disableDefaultUI: true,
@@ -16,17 +20,16 @@ export default React.memo(({
     });
 
     if (onMarkerMoved) {
-      googleMap.addListener("click", ({ latLng }) => {
-        if (mapDivRef.current.mapMarker) {
-          mapDivRef.current.mapMarker.setMap(null);
-        }
-        mapDivRef.current.mapMarker = new google.maps.Marker({ map: googleMap, position: latLng });
-        if (onMarkerMoved) {
-          onMarkerMoved({ lat: latLng.lat(), lng: latLng.lng() });
+      mapRef.current.addListener("click", ({ latLng }) => {
+        if (markerRef.current) {
+          markerRef.current.setMap(null);
         }
+        markerRef.current = new google.maps.Marker({ map: mapRef.current, position: latLng });
+        console.log({ lat: latLng.lat(), lng: latLng.lng() });
+        onMarkerMoved({ lat: latLng.lat(), lng: latLng.lng() });
       });
     }
-  });
+  }, [onMarkerMoved]);
 
   return <div className="map-div" ref={mapDivRef} />
-}, () => true);
+}