# useLogger (/docs/hooks/use-logger)





`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

```tsx
import { useLogger } from '@42-central/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 [#usage]

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

<Preview code="&#x22;function Demo() {\n  const [count, setCount] = useState(0);\n  useLogger('Demo', [count]);\n\n  return <Button onClick={() => setCount((c) => c + 1)}>Clicked {count} times</Button>;\n}&#x22;">
  <LoggerDemo />
</Preview>

## API [#api]

<TypeTable
  type="{
  componentName: {
    type: 'string',
    required: true,
    description: 'The name prefixed to every log line.',
  },
  props: {
    type: 'unknown[]',
    required: true,
    description: &#x22;Values to log alongside mount/update, and the update effect's dependency array.&#x22;,
  },
}"
/>

Always returns `null`.