[IMPL] useLogger hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useLogger/UseLogger.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { useLogger } from "../../../../../../packages/react-tools/src";
+
+/**
+The component uses _useLogger_ hook to trace component state in lifecycle events.
+ */
+const Counter = (props: {init: number}) => {
+	const [state, setState] = useState<number>(props.init);
+	useLogger("Counter", { state, props });
+
+	return (<>
+		<p>Counter is: {state}</p>
+		<button type="button" onClick={() => setState(t => t + 1)}>Increment</button>
+		<button type="button" onClick={() => setState(t => t - 1)}>Decrement</button>
+	</>);
+}
+export const UseLogger = () => {
+	const [state, setState] = useState(0);
+	return <>
+		<button type="button" onClick={() => setState(t => t + 1)}>Increment</button>
+		<br/>
+		<Counter init={state}/>
+	</>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -28,7 +28,8 @@ export const COMPONENTS = [
 			"useLayoutEffectDeepCompare",
 			"useLayoutEffectOnce",
 			"useRerender",
-			"useIsMounted"
+			"useIsMounted",
+			"useLogger"
 		],
 		//PERFORMANCE
 		[

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

@@ -0,0 +1,48 @@
+# useLogger
+Hook to log componet details during Lifecycle events.
+
+## Usage
+
+```tsx
+const Counter = (props: {init: number}) => {
+	const [state, setState] = useState<number>(props.init);
+	useLogger("Counter", { state, props });
+
+	return (<>
+		<p>Counter is: {state}</p>
+		<button type="button" onClick={() => setState(t => t + 1)}>Increment</button>
+		<button type="button" onClick={() => setState(t => t - 1)}>Decrement</button>
+	</>);
+}
+export const UseLogger = () => {
+	const [state, setState] = useState(0);
+	return <>
+		<button type="button" onClick={() => setState(t => t + 1)}>Increment</button>
+		<br/>
+		<Counter init={state}/>
+	</>
+}
+```
+
+> The component uses _useLogger_ hook to trace component state in lifecycle events.
+
+
+## API
+
+```tsx
+useLogger (name: string, props: object) 
+```
+
+> ### Params
+>
+> - __name__: _string_  
+component name.
+> - __props__: _object_  
+props object to track.
+>
+
+> ### Returns
+>
+> 
+> 
+>

packages/react-tools/README.md

@@ -32,7 +32,7 @@
 	- [x] useIsMounted
 	- [ ] useInsertionEffect (polyfill???)
 	- [ ] useDeferredValue (polyfill - an idea can be use setTimeout inside useEffect or this https://lilibraries.github.io/hooks/useDelayedValue/)
-	- [ ] useLogger
+	- [x] useLogger
 
 - __PERFORMANCE__
 	- [x] useCallbackCompare

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

@@ -71,3 +71,4 @@ export { useScreen } from './useScreen';
 export { useMergedRef } from './useMergedRef';
 export { useHotKeys } from './useHotKeys';
 export { usePinchZoom } from './usePinchZoom';
+export { useLogger } from './useLogger';

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

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react"
+
+/**
+ * **`useLogger`**: Hook to log componet details during Lifecycle events.
+ * @param {string} name - component name.
+ * @param {object} props - props object to track.
+ */
+export const useLogger = (name: string, props: object) => {
+	const prevProps = useRef<object>();
+
+	useEffect(() => {
+		if (!prevProps.current) {
+			prevProps.current = props;
+		} else {
+			const keys = Reflect.ownKeys(props);
+			for (const key of keys) {
+				if (Reflect.get(props, key) !== Reflect.get(prevProps.current, key)) {
+					console.log(name + " component updated", prevProps, props);
+				}
+			}
+		}
+	}, [name, props]);
+
+	useEffect(() => {
+		console.log(name + " component mounted");
+
+		return () => {
+			console.log(name + " component unmounted");
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+}

packages/react-tools/src/index.ts

@@ -89,7 +89,8 @@ export {
 	useScreen,
 	useMergedRef,
 	useHotKeys,
-	usePinchZoom
+	usePinchZoom,
+	useLogger
 } from './hooks'
 
 export {