useLifecycleLogger
Logs a component's mount, update, and unmount lifecycle to the console.
About
useLifecycleLogger is a development aid that writes mount, update, and unmount messages to console.log, together with optional values.
Examples
import { useState } from "react";
import { useLifecycleLogger } from "rooks";
export default function LoggedCounter() {
const [count, setCount] = useState(0);
useLifecycleLogger("LoggedCounter", { count });
return (
<button type="button" onClick={() => setCount((value) => value + 1)}>
Count: {count}
</button>
);
}Parameters
| Argument | Type | Default | Meaning |
|---|---|---|---|
componentName | string | "Component" | Prefix for each message. |
...otherArgs | unknown[] | [] | Values forwarded to mount and update logs. |
Return value
The hook returns void.
Behavior and lifecycle
Mount logs "<name> mounted" with the initial arguments. Every committed update logs "<name> updated" with that render's arguments. Unmount logs "<name> unmounted"; its callback is captured on the first render, so it uses the initial component name. React Strict Mode may replay lifecycle effects and therefore produce extra development logs.
Compatibility and accessibility
No browser API is required, but console output may expose application data. Avoid passing secrets or personal information and remove or disable noisy diagnostics in production. The hook does not change rendered accessibility.