@nysds/components 1.16.0-alpha-2 → 1.16.0-alpha3

package/packages/react/react-utils.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function useProperties(targetElement, propName, value) {
   useEffect(() => {
@@ -7,28 +7,34 @@ export function useProperties(targetElement, propName, value) {
       targetElement.current &&
       targetElement.current[propName] !== value
     ) {
-      // add try catch to avoid errors when setting read-only properties
       try {
         targetElement.current[propName] = value;
       } catch (e) {
         console.warn(e);
       }
     }
-  }, [value, targetElement.current]);
+  }, [value, targetElement]);
 }
 
 export function useEventListener(targetElement, eventName, eventHandler) {
-  useLayoutEffect(() => {
-    if (eventHandler !== undefined) {
-      targetElement?.current?.addEventListener(eventName, eventHandler);
-    }
+  // Store the latest handler in a ref so we never need to re-subscribe
+  // just because the consumer passed a new function reference.
+  const savedHandler = useRef(eventHandler);
+  useEffect(() => {
+    savedHandler.current = eventHandler;
+  }, [eventHandler]);
 
-    return () => {
-      if (eventHandler?.cancel) {
-        eventHandler.cancel();
-      }
+  useEffect(() => {
+    const element = targetElement.current;
+    if (!element || eventHandler === undefined) return;
+
+    // Stable wrapper — identity never changes, so add/remove are always paired.
+    const listener = (event) => savedHandler.current(event);
 
-      targetElement?.current?.removeEventListener(eventName, eventHandler);
+    element.addEventListener(eventName, listener);
+
+    return () => {
+      element.removeEventListener(eventName, listener);
     };
-  }, [eventName, eventHandler, targetElement.current]);
+  }, [eventName, targetElement]);
 }