[FIX] useMergedRef useIntersectionObserver useResizeObserver hooks

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useMergedRef/UseMergedRef.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useMergedRef, useResizeObserver } from "../../../../../../packages/react-tools/src";
 
 /**
@@ -7,16 +7,15 @@ The component has a ref to change border color of a div element when a button is
 export const UseMergedRef = () => {
 	const [state, setState] = useState(false);
 	const [refCb] = useResizeObserver<HTMLDivElement>(
-		(entries: ResizeObserverEntry[]) => {
+		useCallback((entries: ResizeObserverEntry[]) => {
 			const result = entries[0].contentRect.width < 100;
 			result !== state && setState(result);
-		}
+		}, [state])
 	);
 	const ref = useRef<HTMLDivElement>(null);
 	const mergedRef = useMergedRef<HTMLDivElement>(ref, refCb);
 
 	const changeBorderColor = () => {
-		mergedRef.current;
 		ref.current && (ref.current.style.border = ref.current.style.border.indexOf("lightgray") !== -1
 			? '1px solid darkcyan'
 			: '1px solid lightgray'

apps/react-tools-demo/src/markdown/useMergedRef.md

@@ -16,6 +16,7 @@ export const UseMergedRef = () => {
 	const mergedRef = useMergedRef<HTMLDivElement>(ref, refCb);
 
 	const changeBorderColor = () => {
+		mergedRef.current;
 		ref.current && (ref.current.style.border = ref.current.style.border.indexOf("lightgray") !== -1
 			? '1px solid darkcyan'
 			: '1px solid lightgray'

packages/react-tools/src/hooks/useEffectOnce.ts

@@ -24,35 +24,32 @@ export const useEffectOnce = (effect: EffectCallback) => {
 	}, [])
 }
 
-/**
- *
- * INFO this implementation works but gives a rerender.
+// INFO this implementation works but gives a rerender.
+//
+//
+// export const useEffectOnce = (effect: EffectCallback) => {
+// 	const update = useRerender();
+// 	const effectFn = useRef(effect);
+// 	const cleanUpFn = useRef<ReturnType<EffectCallback>>();
+// 	const effectCalled = useRef(false);
+// 	const rendered = useRef(false);
 
-export const useEffectOnce = (effect: EffectCallback) => {
-	const update = useRerender();
-	const effectFn = useRef(effect);
-	const cleanUpFn = useRef<ReturnType<EffectCallback>>();
-	const effectCalled = useRef(false);
-	const rendered = useRef(false);
-
-	if (effectCalled.current) {
-		rendered.current = true;
-	}
-
-	useEffect(() => {
-		if (!effectCalled.current) {
-			cleanUpFn.current = effectFn.current();
-			effectCalled.current = true
-			update();
-		}
-		return () => {
-			if (rendered.current) {
-				cleanUpFn.current && cleanUpFn.current();
-				effectCalled.current = false
-			}
-		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-}
+// 	if (effectCalled.current) {
+// 		rendered.current = true;
+// 	}
 
- */
+// 	useEffect(() => {
+// 		if (!effectCalled.current) {
+// 			cleanUpFn.current = effectFn.current();
+// 			effectCalled.current = true
+// 			update();
+// 		}
+// 		return () => {
+// 			if (rendered.current) {
+// 				cleanUpFn.current && cleanUpFn.current();
+// 				effectCalled.current = false
+// 			}
+// 		}
+// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+// 	}, []);
+// }

packages/react-tools/src/hooks/useIntersectionObserver.ts

@@ -11,6 +11,7 @@ export const useIntersectionObserver = <T extends Element>(cb: IntersectionObser
 	const observer = useRef<IntersectionObserver>();
 	const working = useRef(true);
 	const nodeRef = useRef<T>();
+	const cbRef = useRef(cb);
 
 	useEffectOnce(() => () => {
 		nodeRef.current = undefined;
@@ -28,6 +29,13 @@ export const useIntersectionObserver = <T extends Element>(cb: IntersectionObser
 				observer.current = new IntersectionObserver(cb, opts);
 				observer.current.observe(node);
 			}
+			if (cbRef.current !== cb && observer.current && node) {
+				cbRef.current = cb;
+				observer.current?.disconnect();
+				observer.current = undefined;
+				observer.current = new IntersectionObserver(cb, opts);
+				observer.current.observe(node);
+			}
 		}, [cb, opts]),
 		useCallback(() => {
 			if (working.current) {

packages/react-tools/src/hooks/useMergedRef.ts

@@ -9,6 +9,6 @@ export const useMergedRef = <T>(...refs: React.Ref<T>[]) => {
 	const mergedRef = useRef<T>(null);
 	useEffect(() => {
 		refs.forEach(ref => typeof ref === "function" ? ref(mergedRef.current) : (ref as MutableRefObject<T | null>).current = mergedRef.current);
-	}, [mergedRef.current]);
+	}, [refs]);
 	return mergedRef;
 }

packages/react-tools/src/hooks/useResizeObserver.ts

@@ -11,6 +11,7 @@ export const useResizeObserver = <T extends Element>(cb: ResizeObserverCallback,
 	const observer = useRef<ResizeObserver>();
 	const working = useRef(true);
 	const nodeRef = useRef<T>();
+	const cbRef = useRef(cb);
 
 	useEffectOnce(() => () => {
 		nodeRef.current = undefined;
@@ -28,6 +29,13 @@ export const useResizeObserver = <T extends Element>(cb: ResizeObserverCallback,
 				observer.current = new ResizeObserver(cb);
 				observer.current.observe(node, opts);
 			}
+			if (cbRef.current !== cb && observer.current && node) {
+				cbRef.current = cb;
+				observer.current?.disconnect();
+				observer.current = undefined;
+				observer.current = new ResizeObserver(cb);
+				observer.current.observe(node, opts);
+			}
 		}, [cb, opts]),
 		useCallback(() => {
 			if (working.current) {