Cleanup various event listeners.

Also make sure localizeMap() is executed when map style changes as well.

TEST=manual
verified map is localized upon style changes as well

Author: anguyen-yext2

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.8.9",
+  "version": "1.8.10",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "watson@yext.com",
   "license": "BSD-3-Clause",

package.json

@@ -163,6 +163,33 @@ export function MapboxMap<T>({
   // keep track of the previous value of mapboxOptions across renders
   const prevMapboxOptions = useRef(mapboxOptions);
 
+  const localizeMap = useCallback(() => {
+    const mapbox = map.current;
+    if (!mapbox || !locale) return;
+
+    const localizeLabels = () => {
+      mapbox.getStyle().layers.forEach(layer => {
+        if (layer.type === "symbol" && layer.layout?.["text-field"]) {
+          mapbox.setLayoutProperty(
+            layer.id,
+            "text-field",
+            [
+              'coalesce',
+              ['get', `name_${getMapboxLanguage(locale)}`],
+              ['get', 'name']
+            ]
+          );
+        }
+      });
+    }
+
+    if (mapbox.isStyleLoaded()) {
+      localizeLabels();
+    } else {
+      mapbox.once("styledata", () => localizeLabels())
+    }
+  }, [locale]);
+
   useEffect(() => {
     if (mapContainer.current) {
       if (map.current && allowUpdates) {
@@ -199,37 +226,21 @@ export function MapboxMap<T>({
               onDragDebounced(mapbox.getCenter(), mapbox.getBounds());
             }
           });
+          return () => {
+            mapbox.off('drag', () => {
+              onDragDebounced(mapbox.getCenter(), mapbox.getBounds());
+            });
+            mapbox.off('zoom', (e) => {
+              if (e.originalEvent) {
+                onDragDebounced(mapbox.getCenter(), mapbox.getBounds());
+              }
+            });
+          };
         }
       }
-    }
-  }, [mapboxOptions, onDragDebounced]);
-
-  useEffect(() => {
-    const mapbox = map.current;
-    if (!mapbox || !locale) return;
-
-    const localizeMap = () => {
-      mapbox.getStyle().layers.forEach(layer => {
-        if (layer.type === "symbol" && layer.layout?.["text-field"]) {
-          mapbox.setLayoutProperty(
-            layer.id,
-            "text-field",
-            [
-              'coalesce',
-              ['get', `name_${getMapboxLanguage(locale)}`],
-              ['get', 'name']
-            ]
-          );
-        }
-      });
-    }
-
-    if (mapbox.isStyleLoaded()) {
       localizeMap();
-    } else {
-      mapbox.once("styledata", () => localizeMap())
     }
-  }, [locale]);
+  }, [mapboxOptions, onDragDebounced, localizeMap]);
 
   useEffect(() => {
     if (iframeWindow && map.current) {
@@ -290,8 +301,14 @@ export function MapboxMap<T>({
           maxZoom: mapboxOptions?.maxZoom ?? 15
         });
       }
+
+      return () => {
+        markers.current.forEach((marker, i) => {
+          marker?.getElement().removeEventListener('click', () => handlePinClick(locationResults[i]));
+      });
+      }
     }
-  }, [PinComponent, getCoordinate, locationResults, selectedResult, markerOptionsOverride]);
+  }, [PinComponent, getCoordinate, locationResults, selectedResult, markerOptionsOverride, locale]);
 
   return (
     <div ref={mapContainer} className='h-full w-full' />