fix(infowindow): replace useDeepCompareEffect with useEffect

Due to the destructuring assignment of infowindowOptions, the useDeepCompareEffect was used to avoid re-assigning options even if they didn't change.

This, however, caused serious problems with other dependencies of those effects that could contain cycles and large object-structures to be compared.

Instead of `useDeepCompareEffect` this switches to using regular effects and deep memoization for the infowindowOptions.

Author: usefulthink

src/components/info-window.tsx

@@ -9,12 +9,13 @@ import React, {
   useState
 } from 'react';
 import {createPortal} from 'react-dom';
+import isDeepEqual from 'fast-deep-equal';
 
 import {useMap} from '../hooks/use-map';
 import {useMapsEventListener} from '../hooks/use-maps-event-listener';
-import {setValueForStyles} from '../libraries/set-value-for-styles';
 import {useMapsLibrary} from '../hooks/use-maps-library';
-import {useDeepCompareEffect} from '../libraries/use-deep-compare-effect';
+import {useMemoized} from '../hooks/use-memoized';
+import {setValueForStyles} from '../libraries/set-value-for-styles';
 import {CustomMarkerContent, isAdvancedMarker} from './advanced-marker';
 
 export type InfoWindowProps = Omit<
@@ -56,7 +57,7 @@ export const InfoWindow: FunctionComponent<
     onCloseClick,
 
     // other options
-    ...infoWindowOptions
+    ...volatileInfoWindowOptions
   } = props;
 
   // ## create infowindow instance once the mapsLibrary is available.
@@ -68,6 +69,8 @@ export const InfoWindow: FunctionComponent<
   const contentContainerRef = useRef<HTMLElement | null>(null);
   const headerContainerRef = useRef<HTMLElement | null>(null);
 
+  const infoWindowOptions = useMemoized(volatileInfoWindowOptions, isDeepEqual);
+
   useEffect(
     () => {
       if (!mapsLibrary) return;
@@ -118,8 +121,9 @@ export const InfoWindow: FunctionComponent<
     [mapsLibrary]
   );
 
-  // ## update className and styles for `contentContainer`
-  // stores previously applied style properties, so they can be removed when unset
+  // ---- update className and styles for `contentContainer`
+  // prevStyleRef stores previously applied style properties, so they can be
+  // removed when unset
   const prevStyleRef = useRef<CSSProperties | null>(null);
   useEffect(() => {
     if (!infoWindow || !contentContainerRef.current) return;
@@ -136,8 +140,8 @@ export const InfoWindow: FunctionComponent<
       contentContainerRef.current.className = className || '';
   }, [infoWindow, className, style]);
 
-  // ## update options
-  useDeepCompareEffect(
+  // ---- update options
+  useEffect(
     () => {
       if (!infoWindow) return;
 
@@ -172,7 +176,7 @@ export const InfoWindow: FunctionComponent<
 
   // ## open info window when content and map are available
   const map = useMap();
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     // `anchor === null` means an anchor is defined but not ready yet.
     if (!map || !infoWindow || anchor === null) return;
 

src/components/map/use-map-instance.ts

@@ -3,7 +3,7 @@ import {Ref, useEffect, useRef, useState} from 'react';
 import {MapProps} from '../map';
 import {APIProviderContextValue} from '../api-provider';
 
-import {useCallbackRef} from '../../libraries/use-callback-ref';
+import {useCallbackRef} from '../../hooks/use-callback-ref';
 import {useApiIsLoaded} from '../../hooks/use-api-is-loaded';
 import {
   CameraState,

src/components/map/use-map-options.ts

@@ -1,5 +1,5 @@
 import {MapProps} from '../map';
-import {useDeepCompareEffect} from '../../libraries/use-deep-compare-effect';
+import {useDeepCompareEffect} from '../../hooks/use-deep-compare-effect';
 
 const mapOptionKeys: Set<keyof google.maps.MapOptions> = new Set([
   'backgroundColor',

src/components/map/use-tracked-camera-state-ref.ts

@@ -1,5 +1,5 @@
 import {MutableRefObject, useEffect, useRef} from 'react';
-import {useForceUpdate} from '../../libraries/use-force-update';
+import {useForceUpdate} from '../../hooks/use-force-update';
 
 export type CameraState = {
   center: google.maps.LatLngLiteral;

src/libraries/use-callback-ref.tsx renamed to src/hooks/use-callback-ref.ts

@@ -0,0 +1,11 @@
+import {DependencyList, EffectCallback, useEffect} from 'react';
+import {useMemoized} from './use-memoized';
+
+export function useCustomCompareEffect<T extends DependencyList>(
+  effect: EffectCallback,
+  dependencies: T,
+  isEqual: (a: T, b: T) => boolean
+) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, [useMemoized(dependencies, isEqual)]);
+}

src/hooks/use-custom-compare-efffect.ts

@@ -0,0 +1,10 @@
+import {DependencyList, EffectCallback} from 'react';
+import {useCustomCompareEffect} from './use-custom-compare-efffect';
+import isDeepEqual from 'fast-deep-equal';
+
+export function useDeepCompareEffect(
+  effect: EffectCallback,
+  dependencies: DependencyList
+) {
+  useCustomCompareEffect(effect, dependencies, isDeepEqual);
+}

src/hooks/use-deep-compare-effect.ts

@@ -0,0 +1,11 @@
+import {useRef} from 'react';
+
+export function useMemoized<T>(value: T, isEqual: (a: T, b: T) => boolean): T {
+  const ref = useRef<T>(value);
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}