Fix issue 243 (#244)

* Fix issue #243: Prevent browser crash in strict mode (React 18 & 19). * Bump the version - 2.7.4 --------- Co-authored-by: Galin Georgiev <[email protected]>
ErrorPro · Jan 16, 2025 · d9aa89e · d9aa89e
1 parent fde0eec
commit d9aa89e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "types": "index.d.ts",

diff --git a/src/usePlacesWidget.js b/src/usePlacesWidget.js
@@ -28,7 +28,6 @@ export default function usePlacesWidget(props) {
   const inputRef = useRef(null);
   const event = useRef(null);
   const autocompleteRef = useRef(null);
-  const observerHack = useRef(null);
   const languageQueryParam = language ? `&language=${language}` : "";
   const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=${libraries}&key=${apiKey}${languageQueryParam}`;
 
@@ -69,9 +68,9 @@ export default function usePlacesWidget(props) {
         inputRef.current,
         config
       );
-      
-      if(autocompleteRef.current) {
-         event.current = autocompleteRef.current.addListener(
+
+      if (autocompleteRef.current) {
+        event.current = autocompleteRef.current.addListener(
           "place_changed",
           () => {
             if (onPlaceSelected && autocompleteRef && autocompleteRef.current) {
@@ -99,23 +98,26 @@ export default function usePlacesWidget(props) {
   useEffect(() => {
     // TODO find out why react 18(strict mode) hangs the page loading
     if (
-      !React?.version?.startsWith("18") &&
       isBrowser &&
       window.MutationObserver &&
       inputRef.current &&
       inputRef.current instanceof HTMLInputElement
     ) {
-      observerHack.current = new MutationObserver(() => {
-        observerHack.current.disconnect();
+      const observerHack = new MutationObserver(() => {
+        observerHack.disconnect();
 
         if (inputRef.current) {
           inputRef.current.autocomplete = inputAutocompleteValue;
         }
       });
-      observerHack.current.observe(inputRef.current, {
+      observerHack.observe(inputRef.current, {
         attributes: true,
         attributeFilter: ["autocomplete"],
       });
+
+      return () => {
+        observerHack.disconnect(); // Cleanup
+      };
     }
   }, [inputAutocompleteValue]);