[REWORK] useEffectOne and useMergedRef

Author: nDriaDev

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

@@ -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'

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

@@ -37,12 +37,12 @@ export const UseMergedRef = () => {
 ## API
 
 ```tsx
-useMergedRef <T>(...refs: (React.Ref<T>)[]) 
+useMergedRef <T>(...refs: React.Ref<T>[]) 
 ```
 
 > ### Params
 >
-> - __refs__: _React.MutableRefObject<T>[]_
+> - __refs__: _React.Ref<T>[]_
 >
 
 > ### Returns

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

@@ -1,10 +1,33 @@
 import { EffectCallback, useEffect, useRef } from "react";
-import { useRerender } from "."
 
 /**
  * **`useEffectOnce`**: Hook to executes _effect_ and _clean up_ after component mount __only once__. It prevents _React 18 StrictMode_ behavior if present, otherwise it works like a normal _useEffect_ with empty dependencies array. __*N.B.*__ Not use in a component with normal _useEffect_, if it executes a _React.DispatchAction_, because this action is executes twice if there is _React.StrictMode_.
  * @param {EffectCallback} effect
  */
+export const useEffectOnce = (effect: EffectCallback) => {
+	const effectCalled = useRef(false);
+	const cleanUpFn = useRef<ReturnType<EffectCallback>>();
+	const rendered = useRef(false);
+	useEffect(() => {
+		if (!effectCalled.current) {
+			cleanUpFn.current = effect();
+			effectCalled.current = true;
+			setTimeout(() => rendered.current = true, 1);
+		}
+		return () => {
+			if (rendered.current) {
+				cleanUpFn.current && cleanUpFn.current();
+				effectCalled.current = false;
+			}
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [])
+}
+
+/**
+ *
+ * INFO this implementation works but gives a rerender.
+
 export const useEffectOnce = (effect: EffectCallback) => {
 	const update = useRerender();
 	const effectFn = useRef(effect);
@@ -30,4 +53,6 @@ export const useEffectOnce = (effect: EffectCallback) => {
 		}
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
-}
+}
+
+ */

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

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useRef } from "react";
+import React, { MutableRefObject, useEffect, useRef } from "react";
 
 /**
  * **`useMergedRef`**: Hook to merge multiple refs into one.
@@ -7,7 +7,8 @@ import React, { MutableRefObject, useRef } from "react";
  */
 export const useMergedRef = <T>(...refs: React.Ref<T>[]) => {
 	const mergedRef = useRef<T>(null);
-	refs.forEach(ref => typeof ref === "function" ? ref(mergedRef.current) : (ref as MutableRefObject<T|null>).current = mergedRef.current);
-
+	useEffect(() => {
+		refs.forEach(ref => typeof ref === "function" ? ref(mergedRef.current) : (ref as MutableRefObject<T | null>).current = mergedRef.current);
+	}, [mergedRef.current]);
 	return mergedRef;
 }