useLogger

Hook to log componet details during Lifecycle events.

Demo

INFO

The component uses useLogger hook to trace component state in lifecycle events.

Loading demo…

Show source code

import { useState } from "react";
import { useLogger } from "../../../..";

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}/>
	</>
}

Types

UseLoggerProps

Parameters accepted by useLogger.

Property	Type	Required	Description
name	string	✓	The display name of the component being logged, used as a prefix in all console output (e.g. "MyComponent mounted", "MyComponent updated").
props	object	✓	The current props of the component. On each render the hook compares these with the previous render's props and logs which individual properties changed, along with their old and new values.