@reactuses/core 6.1.9 → 6.1.11

package/dist/index.cjs

@@ -23,7 +23,7 @@ function isString(val) {
 const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const isBrowser = typeof window !== 'undefined';
 const isNavigator = typeof navigator !== 'undefined';
-function noop() {}
+function noop$1() {}
 const isIOS = isBrowser && ((_window = window) == null ? void 0 : (_window_navigator = _window.navigator) == null ? void 0 : _window_navigator.userAgent) && /iP(?:ad|hone|od)/.test(window.navigator.userAgent);
 
 const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
@@ -113,10 +113,57 @@ const useDeepCompareEffect = (effect, deps)=>{
     useCustomCompareEffect(effect, deps, lodashEs.isEqual);
 };
 
-function useEventListener(eventName, handler, element, options = defaultOptions$1) {
+/**
+ * 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 { key: elementKey, ref: elementRef } = useStableTarget(element, defaultWindow);
     useDeepCompareEffect(()=>{
-        const targetElement = getTargetElement(element, defaultWindow);
+        // 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,10 +177,12 @@ function useEventListener(eventName, handler, element, options = defaultOptions$
         };
     }, [
         eventName,
-        element,
+        elementKey,
         options
     ]);
 }
+function noop() {}
+const useEventListener = isBrowser ? useEventListenerImpl : noop;
 
 const useMount = (fn)=>{
     if (isDev) {
@@ -203,7 +252,7 @@ function _async_to_generator$7(fn) {
         });
     };
 }
-const useAsyncEffect = (effect, cleanup = noop, deps)=>{
+const useAsyncEffect = (effect, cleanup = noop$1, deps)=>{
     const mounted = useMountedState();
     React.useEffect(()=>{
         const execute = ()=>_async_to_generator$7(function*() {
@@ -1097,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;
         }
@@ -1111,9 +1161,7 @@ const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
-        savedCallback,
-        stop,
-        target,
+        targetKey,
         options
     ]);
     return stop;
@@ -1224,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;
         }
@@ -1238,6 +1287,7 @@ const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>
         observerRef.current.observe(element);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -1774,7 +1824,7 @@ const defaultListerOptions = {
     passive: true
 };
 const useScroll = (target, options = defaultOptions$1)=>{
-    const { throttle = 0, idle = 200, onStop = noop, onScroll = noop, offset = {
+    const { throttle = 0, idle = 200, onStop = noop$1, onScroll = noop$1, offset = {
         left: 0,
         right: 0,
         top: 0,
@@ -2112,7 +2162,7 @@ const useMediaDevices = (options = {})=>{
                         label
                     }))
             });
-        }).catch(noop);
+        }).catch(noop$1);
     }, []);
     const ensurePermissions = React.useCallback(()=>_async_to_generator$3(function*() {
             if (!isSupported) {
@@ -2343,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;
         }
@@ -2357,6 +2408,7 @@ const useMutationObserver = (callback, target, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -2515,13 +2567,13 @@ function usePageLeave() {
         const from = event.relatedTarget || event.toElement;
         setIsLeft(!from);
     };
-    useEventListener('mouseout', handler, ()=>window, {
+    useEventListener('mouseout', handler, defaultWindow, {
         passive: true
     });
-    useEventListener('mouseleave', handler, ()=>document, {
+    useEventListener('mouseleave', handler, defaultDocument, {
         passive: true
     });
-    useEventListener('mouseenter', handler, ()=>document, {
+    useEventListener('mouseenter', handler, defaultDocument, {
         passive: true
     });
     return isLeft;
@@ -2549,7 +2601,7 @@ const usePermission = (permissionDesc)=>{
             permissionStatus = status;
             on(permissionStatus, 'change', onChange);
             onChange();
-        }).catch(noop);
+        }).catch(noop$1);
         return ()=>{
             permissionStatus && off(permissionStatus, 'change', onChange);
             mounted = false;
@@ -2687,7 +2739,7 @@ const useScratch = (target, options = {})=>{
                     isScratching: true
                 });
                 refState.current = newState;
-                (optionsRef.current.onScratch || noop)(newState);
+                (optionsRef.current.onScratch || noop$1)(newState);
                 return newState;
             });
         });
@@ -2701,7 +2753,7 @@ const useScratch = (target, options = {})=>{
             isScratching: false
         });
         refState.current = endState;
-        (optionsRef.current.onScratchEnd || noop)(endState);
+        (optionsRef.current.onScratchEnd || noop$1)(endState);
         setState(endState);
     };
     const startScratching = (docX, docY)=>{
@@ -2734,7 +2786,7 @@ const useScratch = (target, options = {})=>{
             posY: elY
         };
         refState.current = newState;
-        (optionsRef.current.onScratchStart || noop)(newState);
+        (optionsRef.current.onScratchStart || noop$1)(newState);
         setState(newState);
     };
     useEventListener('mousedown', (event)=>{
@@ -2761,7 +2813,7 @@ const useScratch = (target, options = {})=>{
     return state;
 };
 
-const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
+const useScriptTag = (src, onLoaded = noop$1, options = defaultOptions$1)=>{
     const { immediate = true, manual = false, type = 'text/javascript', async = true, crossOrigin, referrerPolicy, noModule, defer, attrs = {} } = options;
     const scriptTag = React.useRef(null);
     const _promise = React.useRef(null);
@@ -3171,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;
         }
@@ -3195,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.d.cts

@@ -888,12 +888,13 @@ interface UseEventEmitterReturn<T, U = void> {
 declare function useEventEmitter<T, U = void>(): readonly [UseEventEmitterEvent<T, U>, (arg1: T, arg2: U) => void, () => void];
 
 type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
-declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof ElementEventMap>(eventName: K, handler: (event: ElementEventMap[K]) => void, element: Element, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K = Event>(eventName: string, handler: (event: K) => void, element: EventTarget | null | undefined, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener(eventName: string, handler: (...p: any) => void, element?: Target, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof ElementEventMap>(eventName: K, handler: (event: ElementEventMap[K]) => void, element: Element, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K = Event>(eventName: string, handler: (event: K) => void, element: EventTarget | null | undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl(eventName: string, handler: (...p: any) => void, element?: Target, options?: boolean | AddEventListenerOptions): void;
+declare const useEventListener: typeof useEventListenerImpl;
 
 /**
  * @title useEyeDropper

package/dist/index.d.mts

@@ -888,12 +888,13 @@ interface UseEventEmitterReturn<T, U = void> {
 declare function useEventEmitter<T, U = void>(): readonly [UseEventEmitterEvent<T, U>, (arg1: T, arg2: U) => void, () => void];
 
 type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
-declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof ElementEventMap>(eventName: K, handler: (event: ElementEventMap[K]) => void, element: Element, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K = Event>(eventName: string, handler: (event: K) => void, element: EventTarget | null | undefined, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener(eventName: string, handler: (...p: any) => void, element?: Target, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof ElementEventMap>(eventName: K, handler: (event: ElementEventMap[K]) => void, element: Element, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K = Event>(eventName: string, handler: (event: K) => void, element: EventTarget | null | undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl(eventName: string, handler: (...p: any) => void, element?: Target, options?: boolean | AddEventListenerOptions): void;
+declare const useEventListener: typeof useEventListenerImpl;
 
 /**
  * @title useEyeDropper

package/dist/index.d.ts

@@ -888,12 +888,13 @@ interface UseEventEmitterReturn<T, U = void> {
 declare function useEventEmitter<T, U = void>(): readonly [UseEventEmitterEvent<T, U>, (arg1: T, arg2: U) => void, () => void];
 
 type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
-declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof ElementEventMap>(eventName: K, handler: (event: ElementEventMap[K]) => void, element: Element, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K = Event>(eventName: string, handler: (event: K) => void, element: EventTarget | null | undefined, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener(eventName: string, handler: (...p: any) => void, element?: Target, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K extends keyof ElementEventMap>(eventName: K, handler: (event: ElementEventMap[K]) => void, element: Element, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl<K = Event>(eventName: string, handler: (event: K) => void, element: EventTarget | null | undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListenerImpl(eventName: string, handler: (...p: any) => void, element?: Target, options?: boolean | AddEventListenerOptions): void;
+declare const useEventListener: typeof useEventListenerImpl;
 
 /**
  * @title useEyeDropper

package/dist/index.mjs

@@ -15,7 +15,7 @@ function isString(val) {
 const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const isBrowser = typeof window !== 'undefined';
 const isNavigator = typeof navigator !== 'undefined';
-function noop() {}
+function noop$1() {}
 const isIOS = isBrowser && ((_window = window) == null ? void 0 : (_window_navigator = _window.navigator) == null ? void 0 : _window_navigator.userAgent) && /iP(?:ad|hone|od)/.test(window.navigator.userAgent);
 
 const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
@@ -105,10 +105,57 @@ const useDeepCompareEffect = (effect, deps)=>{
     useCustomCompareEffect(effect, deps, isEqual);
 };
 
-function useEventListener(eventName, handler, element, options = defaultOptions$1) {
+/**
+ * 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 { key: elementKey, ref: elementRef } = useStableTarget(element, defaultWindow);
     useDeepCompareEffect(()=>{
-        const targetElement = getTargetElement(element, defaultWindow);
+        // 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,10 +169,12 @@ function useEventListener(eventName, handler, element, options = defaultOptions$
         };
     }, [
         eventName,
-        element,
+        elementKey,
         options
     ]);
 }
+function noop() {}
+const useEventListener = isBrowser ? useEventListenerImpl : noop;
 
 const useMount = (fn)=>{
     if (isDev) {
@@ -195,7 +244,7 @@ function _async_to_generator$7(fn) {
         });
     };
 }
-const useAsyncEffect = (effect, cleanup = noop, deps)=>{
+const useAsyncEffect = (effect, cleanup = noop$1, deps)=>{
     const mounted = useMountedState();
     useEffect(()=>{
         const execute = ()=>_async_to_generator$7(function*() {
@@ -1089,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;
         }
@@ -1103,9 +1153,7 @@ const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
-        savedCallback,
-        stop,
-        target,
+        targetKey,
         options
     ]);
     return stop;
@@ -1216,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;
         }
@@ -1230,6 +1279,7 @@ const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>
         observerRef.current.observe(element);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -1766,7 +1816,7 @@ const defaultListerOptions = {
     passive: true
 };
 const useScroll = (target, options = defaultOptions$1)=>{
-    const { throttle = 0, idle = 200, onStop = noop, onScroll = noop, offset = {
+    const { throttle = 0, idle = 200, onStop = noop$1, onScroll = noop$1, offset = {
         left: 0,
         right: 0,
         top: 0,
@@ -2104,7 +2154,7 @@ const useMediaDevices = (options = {})=>{
                         label
                     }))
             });
-        }).catch(noop);
+        }).catch(noop$1);
     }, []);
     const ensurePermissions = useCallback(()=>_async_to_generator$3(function*() {
             if (!isSupported) {
@@ -2335,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;
         }
@@ -2349,6 +2400,7 @@ const useMutationObserver = (callback, target, options = defaultOptions$1)=>{
         observerRef.current.observe(element, options);
         return stop;
     }, [
+        targetKey,
         options
     ]);
     return stop;
@@ -2507,13 +2559,13 @@ function usePageLeave() {
         const from = event.relatedTarget || event.toElement;
         setIsLeft(!from);
     };
-    useEventListener('mouseout', handler, ()=>window, {
+    useEventListener('mouseout', handler, defaultWindow, {
         passive: true
     });
-    useEventListener('mouseleave', handler, ()=>document, {
+    useEventListener('mouseleave', handler, defaultDocument, {
         passive: true
     });
-    useEventListener('mouseenter', handler, ()=>document, {
+    useEventListener('mouseenter', handler, defaultDocument, {
         passive: true
     });
     return isLeft;
@@ -2541,7 +2593,7 @@ const usePermission = (permissionDesc)=>{
             permissionStatus = status;
             on(permissionStatus, 'change', onChange);
             onChange();
-        }).catch(noop);
+        }).catch(noop$1);
         return ()=>{
             permissionStatus && off(permissionStatus, 'change', onChange);
             mounted = false;
@@ -2679,7 +2731,7 @@ const useScratch = (target, options = {})=>{
                     isScratching: true
                 });
                 refState.current = newState;
-                (optionsRef.current.onScratch || noop)(newState);
+                (optionsRef.current.onScratch || noop$1)(newState);
                 return newState;
             });
         });
@@ -2693,7 +2745,7 @@ const useScratch = (target, options = {})=>{
             isScratching: false
         });
         refState.current = endState;
-        (optionsRef.current.onScratchEnd || noop)(endState);
+        (optionsRef.current.onScratchEnd || noop$1)(endState);
         setState(endState);
     };
     const startScratching = (docX, docY)=>{
@@ -2726,7 +2778,7 @@ const useScratch = (target, options = {})=>{
             posY: elY
         };
         refState.current = newState;
-        (optionsRef.current.onScratchStart || noop)(newState);
+        (optionsRef.current.onScratchStart || noop$1)(newState);
         setState(newState);
     };
     useEventListener('mousedown', (event)=>{
@@ -2753,7 +2805,7 @@ const useScratch = (target, options = {})=>{
     return state;
 };
 
-const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
+const useScriptTag = (src, onLoaded = noop$1, options = defaultOptions$1)=>{
     const { immediate = true, manual = false, type = 'text/javascript', async = true, crossOrigin, referrerPolicy, noModule, defer, attrs = {} } = options;
     const scriptTag = useRef(null);
     const _promise = useRef(null);
@@ -3163,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;
         }
@@ -3187,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.9",
+  "version": "6.1.11",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {