useLogger

useLogger logs a component's lifecycle to the console — useful for spotting unexpected re-renders or verifying an effect's cleanup runs when you expect it to:

• <name> mounted — once, on mount, alongside the given values
• <name> updated — on every change of props
• <name> unmounted — on cleanup

import { useLogger } from '@42/ui-react';

function Demo({ count, open }: { count: number; open: boolean }) {
  useLogger('Demo', [count, open]);
  // ...
}

props is compared by the effect's dependency array, so pass the values themselves (useLogger("Demo", [count, open])) rather than a fresh object literal — an inline { count, open } would be a new reference on every render and log an "updated" on every single one.

Usage

Open the browser console, then click the button — you'll see a mounted log on load and an updated log on every click.

function Demo() {  const [count, setCount] = useState(0);  useLogger('Demo', [count]);  return <Button onClick={() => setCount((c) => c + 1)}>Clicked {count} times</Button>;}

API

Always returns null.