useLogger

Category

Lifecycle

Export Size

236 B

Last Changed

5 days ago

Console-log a component's lifecycle transitions — mount, every update, and unmount.

Demo

Usage

import { useLogger } from '@reause/shared'

function TodoList({ todos }: { todos: string[] }) {
  useLogger('TodoList', todos)

  return <ul>{todos.map(todo => <li key={todo}>{todo}</li>)}</ul>
}

// on mount:    "TodoList mounted" […]
// on a render: "TodoList updated" […]   ← one line per re-render after mount
// on unmount:  "TodoList unmounted"

Type Declarations

export function useLogger(componentName: string, ...rest: any[]): void

Source

Source · Demo · react-use

Contributors

Changelog

v0.1.7 on

b6f8b - feat(shared): add useLogger (#926)