@reactuses/core 6.1.10 → 6.1.11

package/dist/index.cjs

@@ -113,10 +113,57 @@ const useDeepCompareEffect = (effect, deps)=>{
     useCustomCompareEffect(effect, deps, lodashEs.isEqual);
 };
 
+/**
+ * Creates a stable identifier for a BasicTarget that can be safely used in effect dependencies.
+ *
+ * This hook solves the problem where passing unstable function references like `() => document`
+ * would cause infinite re-renders when used directly in effect dependency arrays.
+ *
+ * @param target - The target element (ref, function, or direct element)
+ * @param defaultElement - Default element to use if target is undefined
+ * @returns A stable reference that only changes when the actual target element changes
+ *
+ * @example
+ * ```tsx
+ * // For ref objects: returns the ref itself (stable)
+ * const ref = useRef<HTMLDivElement>(null)
+ * const key = useStableTarget(ref) // key === ref (stable)
+ *
+ * // For functions: returns the resolved actual element
+ * const key = useStableTarget(() => document) // key === document (stable)
+ *
+ * // For direct elements: returns the element itself
+ * const key = useStableTarget(divElement) // key === divElement (stable)
+ * ```
+ */ function useStableTarget(target, defaultElement) {
+    const targetRef = React.useRef(target);
+    targetRef.current = target;
+    // Calculate stable key without memoization
+    // For ref objects: return the ref itself (always stable)
+    // For functions/direct elements: resolve to the actual element
+    let stableKey;
+    if (!target) {
+        stableKey = defaultElement != null ? defaultElement : null;
+    } else if (typeof target === 'object' && 'current' in target) {
+        // Ref object - use the ref itself as the stable key
+        stableKey = target;
+    } else {
+        // Function or direct element - resolve to actual element
+        stableKey = getTargetElement(target, defaultElement);
+    }
+    return {
+        /** The stable key that can be safely used in effect dependencies */ key: stableKey,
+        /** A ref containing the current target (useful for accessing in effects) */ ref: targetRef
+    };
+}
+
 function useEventListenerImpl(eventName, handler, element, options = defaultOptions$1) {
     const savedHandler = useLatest(handler);
-    const targetElement = getTargetElement(element, defaultWindow);
+    const { key: elementKey, ref: elementRef } = useStableTarget(element, defaultWindow);
     useDeepCompareEffect(()=>{
+        // Call getTargetElement inside effect to support ref-based targets
+        // (ref.current is null during render, only available in commit phase)
+        const targetElement = getTargetElement(elementRef.current, defaultWindow);
         if (!(targetElement && targetElement.addEventListener)) {
             return;
         }
@@ -130,7 +177,7 @@ function useEventListenerImpl(eventName, handler, element, options = defaultOpti
         };
     }, [
         eventName,
-        targetElement,
+        elementKey,
         options
     ]);
 }
@@ -1099,13 +1146,14 @@ const useDropZone = (target, onDrop)=>{
 const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
     const savedCallback = useLatest(callback);
     const observerRef = React.useRef();
+    const { key: targetKey, ref: targetRef } = useStableTarget(target);
     const stop = React.useCallback(()=>{
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = getTargetElement(target);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
@@ -1113,9 +1161,7 @@ const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
-        savedCallback,
-        stop,
-        target,
+        targetKey,
         options
     ]);
     return stop;
@@ -1226,13 +1272,14 @@ const useElementSize = (target, options = defaultOptions$1)=>{
 const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>{
     const savedCallback = useLatest(callback);
     const observerRef = React.useRef();
+    const { key: targetKey, ref: targetRef } = useStableTarget(target);
     const stop = React.useCallback(()=>{
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = getTargetElement(target);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
@@ -1240,6 +1287,7 @@ const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>
         observerRef.current.observe(element);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -2345,13 +2393,14 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
 const useMutationObserver = (callback, target, options = defaultOptions$1)=>{
     const callbackRef = useLatest(callback);
     const observerRef = React.useRef();
+    const { key: targetKey, ref: targetRef } = useStableTarget(target);
     const stop = React.useCallback(()=>{
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = getTargetElement(target);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
@@ -2359,6 +2408,7 @@ const useMutationObserver = (callback, target, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -3173,21 +3223,25 @@ const useSetState = (initialState)=>{
 
 function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
     const [isSticky, setSticky] = React.useState(false);
+    const { key: targetKey, ref: targetRef } = useStableTarget(targetElement);
+    const { key: scrollKey, ref: scrollRef } = useStableTarget(scrollElement);
+    const axisRef = useLatest(axis);
+    const navRef = useLatest(nav);
     const { run: scrollHandler } = useThrottleFn(()=>{
-        const element = getTargetElement(targetElement);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
         const rect = element.getBoundingClientRect();
-        if (axis === 'y') {
-            setSticky((rect == null ? void 0 : rect.top) <= nav);
+        if (axisRef.current === 'y') {
+            setSticky((rect == null ? void 0 : rect.top) <= navRef.current);
         } else {
-            setSticky((rect == null ? void 0 : rect.left) <= nav);
+            setSticky((rect == null ? void 0 : rect.left) <= navRef.current);
         }
     }, 50);
     React.useEffect(()=>{
-        const element = getTargetElement(targetElement);
-        const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+        const element = getTargetElement(targetRef.current);
+        const scrollParent = getTargetElement(scrollRef.current) || getScrollParent(axisRef.current, element);
         if (!element || !scrollParent) {
             return;
         }
@@ -3197,9 +3251,8 @@ function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
             scrollParent.removeEventListener('scroll', scrollHandler);
         };
     }, [
-        axis,
-        targetElement,
-        scrollElement,
+        targetKey,
+        scrollKey,
         scrollHandler
     ]);
     return [

package/dist/index.mjs

@@ -105,10 +105,57 @@ const useDeepCompareEffect = (effect, deps)=>{
     useCustomCompareEffect(effect, deps, isEqual);
 };
 
+/**
+ * Creates a stable identifier for a BasicTarget that can be safely used in effect dependencies.
+ *
+ * This hook solves the problem where passing unstable function references like `() => document`
+ * would cause infinite re-renders when used directly in effect dependency arrays.
+ *
+ * @param target - The target element (ref, function, or direct element)
+ * @param defaultElement - Default element to use if target is undefined
+ * @returns A stable reference that only changes when the actual target element changes
+ *
+ * @example
+ * ```tsx
+ * // For ref objects: returns the ref itself (stable)
+ * const ref = useRef<HTMLDivElement>(null)
+ * const key = useStableTarget(ref) // key === ref (stable)
+ *
+ * // For functions: returns the resolved actual element
+ * const key = useStableTarget(() => document) // key === document (stable)
+ *
+ * // For direct elements: returns the element itself
+ * const key = useStableTarget(divElement) // key === divElement (stable)
+ * ```
+ */ function useStableTarget(target, defaultElement) {
+    const targetRef = useRef(target);
+    targetRef.current = target;
+    // Calculate stable key without memoization
+    // For ref objects: return the ref itself (always stable)
+    // For functions/direct elements: resolve to the actual element
+    let stableKey;
+    if (!target) {
+        stableKey = defaultElement != null ? defaultElement : null;
+    } else if (typeof target === 'object' && 'current' in target) {
+        // Ref object - use the ref itself as the stable key
+        stableKey = target;
+    } else {
+        // Function or direct element - resolve to actual element
+        stableKey = getTargetElement(target, defaultElement);
+    }
+    return {
+        /** The stable key that can be safely used in effect dependencies */ key: stableKey,
+        /** A ref containing the current target (useful for accessing in effects) */ ref: targetRef
+    };
+}
+
 function useEventListenerImpl(eventName, handler, element, options = defaultOptions$1) {
     const savedHandler = useLatest(handler);
-    const targetElement = getTargetElement(element, defaultWindow);
+    const { key: elementKey, ref: elementRef } = useStableTarget(element, defaultWindow);
     useDeepCompareEffect(()=>{
+        // Call getTargetElement inside effect to support ref-based targets
+        // (ref.current is null during render, only available in commit phase)
+        const targetElement = getTargetElement(elementRef.current, defaultWindow);
         if (!(targetElement && targetElement.addEventListener)) {
             return;
         }
@@ -122,7 +169,7 @@ function useEventListenerImpl(eventName, handler, element, options = defaultOpti
         };
     }, [
         eventName,
-        targetElement,
+        elementKey,
         options
     ]);
 }
@@ -1091,13 +1138,14 @@ const useDropZone = (target, onDrop)=>{
 const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
     const savedCallback = useLatest(callback);
     const observerRef = useRef();
+    const { key: targetKey, ref: targetRef } = useStableTarget(target);
     const stop = useCallback(()=>{
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = getTargetElement(target);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
@@ -1105,9 +1153,7 @@ const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
-        savedCallback,
-        stop,
-        target,
+        targetKey,
         options
     ]);
     return stop;
@@ -1218,13 +1264,14 @@ const useElementSize = (target, options = defaultOptions$1)=>{
 const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>{
     const savedCallback = useLatest(callback);
     const observerRef = useRef();
+    const { key: targetKey, ref: targetRef } = useStableTarget(target);
     const stop = useCallback(()=>{
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = getTargetElement(target);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
@@ -1232,6 +1279,7 @@ const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>
         observerRef.current.observe(element);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -2337,13 +2385,14 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
 const useMutationObserver = (callback, target, options = defaultOptions$1)=>{
     const callbackRef = useLatest(callback);
     const observerRef = useRef();
+    const { key: targetKey, ref: targetRef } = useStableTarget(target);
     const stop = useCallback(()=>{
         if (observerRef.current) {
             observerRef.current.disconnect();
         }
     }, []);
     useDeepCompareEffect(()=>{
-        const element = getTargetElement(target);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
@@ -2351,6 +2400,7 @@ const useMutationObserver = (callback, target, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -3165,21 +3215,25 @@ const useSetState = (initialState)=>{
 
 function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
     const [isSticky, setSticky] = useState(false);
+    const { key: targetKey, ref: targetRef } = useStableTarget(targetElement);
+    const { key: scrollKey, ref: scrollRef } = useStableTarget(scrollElement);
+    const axisRef = useLatest(axis);
+    const navRef = useLatest(nav);
     const { run: scrollHandler } = useThrottleFn(()=>{
-        const element = getTargetElement(targetElement);
+        const element = getTargetElement(targetRef.current);
         if (!element) {
             return;
         }
         const rect = element.getBoundingClientRect();
-        if (axis === 'y') {
-            setSticky((rect == null ? void 0 : rect.top) <= nav);
+        if (axisRef.current === 'y') {
+            setSticky((rect == null ? void 0 : rect.top) <= navRef.current);
         } else {
-            setSticky((rect == null ? void 0 : rect.left) <= nav);
+            setSticky((rect == null ? void 0 : rect.left) <= navRef.current);
         }
     }, 50);
     useEffect(()=>{
-        const element = getTargetElement(targetElement);
-        const scrollParent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+        const element = getTargetElement(targetRef.current);
+        const scrollParent = getTargetElement(scrollRef.current) || getScrollParent(axisRef.current, element);
         if (!element || !scrollParent) {
             return;
         }
@@ -3189,9 +3243,8 @@ function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
             scrollParent.removeEventListener('scroll', scrollHandler);
         };
     }, [
-        axis,
-        targetElement,
-        scrollElement,
+        targetKey,
+        scrollKey,
         scrollHandler
     ]);
     return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "6.1.10",
+  "version": "6.1.11",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {