useTilg

Tiny Logger is a magical React Hook to help you debug your components.

You can quickly try out the demo.

Table of Contents

- Installation
- Features
- Lifecycle Events (What)
- Component Name and Props (Who)
- Debug Message (Why)
- What Has Changed? (Why)
- Quick Logs (Why)
- Advanced Features
- Markdown
- Return Original Value
- Auto Deduplication
- CLI Support
- FAQ & Caveats

Installation

The package is released as tilg, use:

``sh
npm i tilg
`

to install it with npm. Or you can choose another package manager.

Features

$3

Simply insert the useTilg() hook into the component, and it will log the render, mount, unmount events in the console:

`jsx
import useTilg from 'tilg'

function MyButton() {
useTilg()
return Click me
}
`





Logs of render and mount events.


$3

You might noticed that it also displays the name and props of the component, which is very helpful for debugging.

`jsx
import useTilg from 'tilg'

function MyButton({ text }) {
useTilg()
return {text}
}

function Title({ children }) {
useTilg()
return

{children}

export default function Page() {
return (
<>




)
}
`

When there’re multiple elements of the same component being rendered, it adds a counter (2) for distinguishing so you know who is logging the information:





Information of the logged components.


$3

Another critical thing is to know why does a component re-renders. useTilg gives you a simple but powerful API for this:

`jsx
import { useState } from 'react'
import useTilg from 'tilg'

function Counter() {
const [count, setCount] = useState(0)

useTilg()count = ${count}

return setCount(count + 1)}>{count}
}
`

When appending a template literal to the useTilg() call, it will also be displayed as the debug message:

`jsx
useTilg()count = ${count}
`





Logs of “count = ?”.


You can know where the message is from, too:





Trace of the message and a link to the code location.


$3

Something troubles me a lot when debugging a component is, it’s sometimes hard to know which state has changed and triggered a re-render. useTilg tracks all the arguments in the debug message and tells you which one has changed since the previous render:

`jsx
import { useState } from 'react'
import useTilg from 'tilg'

function MyApp() {
const [input, setInput] = useState('')
const [count, setCount] = useState(0)

useTilg()input = ${input}, count = ${count}

return (
<>
setInput(e.target.value)} value={input} />
setCount(count + 1)}>{count}

)
}
`





A hint for the updated part.


$3

If you don't need a debug message but only want to quickly log some values, just pass them to the hook directly:

`jsx
import { useState } from 'react'
import useTilg from 'tilg'

function MyApp() {
const [input, setInput] = useState('')
const [count, setCount] = useState(0)

useTilg(input, count)

return (
<>
setInput(e.target.value)} value={input} />
setCount(count + 1)}>{count}

)
}
`





Debug values quickly.


Advanced Features

$3

You can use Markdown's code ( `), italic (_ or ), and bold (__ or *) syntax in your debug message to make it look nicer:

`jsx
function MyApp() {
const [count, setCount] = useState(0)

useTilg()Debug: \count\ = _${count}_.

return setCount(count + 1)}>{count}
}
`





Markdown syntax in log messages.


$3

The useTilg() hook also returns its first argument, or the first value in the template if specified, so you can quickly debug something in-place by wrapping it with useTilg():

`diff
function MyApp() {
const [count, setCount] = useState(0)

return setCount(count + 1)}>{
+ useTilg(count)
}
}
`





Log and return the original value.


$3

Even if you have multiple useTilg() hooks in the same component, the lifecycle events will only be logged once per component:

`jsx
function MyApp() {
const [input, setInput] = useState('')
const [count, setCount] = useState(0)

useTilg()
useTilg()input = ${input}
useTilg()count = ${count}

return (
<>
setInput(e.target.value)} value={input} />
setCount(count + 1)}>{count}

)
}
`





Render, mount, and unmount events will not be duplicated even if you have multiple useTilg() hooks.


$3

If you are running your component during SSR, or running server-side tests, useTilg() properly outputs the result in Node.js CLI too:

`jsx
function App() {
const [count, setCount] = useState(42)

useTilg()The answer is ${{ answer: count }}

return setCount(count + 1)}>{count}
}
`





Node.js CLI output.


FAQ & Caveats

- Is it safe to ship code with useTilg to production?
Although useTilg() does nothing in a production build (process.env.NODE_ENV === 'production') but only an empty function, I encourge you to remove the hook from the source code after finishing development your component.

- How do you implement this hook? What can I learn from the code?
It is very hacky. Don't rely on it or try it in production, or you will be fired.

- Why not design the API as useTilgmessage `?
Then it will not be identified as a hook, React Refresh and HMR will not work correctly.

License

The MIT License (MIT).