feat: update eslint-plugin-react-hooks

package.json

@@ -79,7 +79,7 @@
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^6.1.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "globals": "^16.4.0",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^30.2.0",

src/components/advanced-marker.tsx

@@ -1,3 +1,12 @@
+/* eslint-disable react-hooks/immutability */
+// The `react-hooks/immutability` rule is disabled in this file because the
+// google.maps.marker.AdvancedMarkerElement object is designed to be mutated
+// directly. This is a common pattern when working with imperative APIs like
+// the Google Maps JavaScript API. While this goes against the principles of
+// immutable state in React, it is a necessary evil to integrate with the
+// Google Maps API. The mutations are carefully managed within the `useEffect`
+// hooks to ensure that they only happen when the props change.
+
 import type {PropsWithChildren, Ref} from 'react';
 import React, {
   Children,
@@ -383,9 +392,10 @@ function useAdvancedMarkerAnchoring(
         // anchoring of the advanced marker element from the api
         contentElement.style.transform = `translate(50%, 100%) translate(${translateX}, ${translateY})`;
 
-        // We need some kind of flag to identify the custom marker content
-        // in the infowindow component. Choosing a data attribute to also be able
-        // to target it via CSS to disable pointer event when using custom anchor point
+        // data-origin is needed to identify the custom marker content in the
+        // InfoWindow component as well as in the global CSS used to disable
+        // the pointer event when anchor points are used in older Google Maps
+        // versions.
         marker.dataset.origin = 'rgm';
 
         globalStyleManager.addAdvancedMarkerPointerEventsOverwrite();

src/hooks/use-memoized.ts

@@ -1,11 +1,12 @@
-import {useRef} from 'react';
+import {useMemo} from 'react';
+import {usePrevious} from './use-previous';
 
 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;
+  const previous = usePrevious(value);
+  return useMemo(() => {
+    if (previous && isEqual(previous, value)) {
+      return previous;
+    }
+    return value;
+  }, [value, previous, isEqual]);
 }

src/hooks/use-previous.ts

@@ -0,0 +1,15 @@
+import {useEffect, useRef} from 'react';
+
+/**
+ * A hook to store the previous value of a variable.
+ * @param value The value to store
+ * @returns The previous value
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>(undefined);
+  useEffect(() => {
+    ref.current = value;
+  });
+  // eslint-disable-next-line react-hooks/refs
+  return ref.current;
+}

src/hooks/use-prop-binding.ts

@@ -17,6 +17,7 @@ export function usePropBinding<T extends object, K extends keyof T>(
   useEffect(() => {
     if (!object) return;
 
+    // eslint-disable-next-line react-hooks/immutability
     object[prop] = value;
   }, [object, prop, value]);
 }