Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
useTilg
Tiny Logger is a magical React Hook to help you debug your components.
You can quickly try out the demo.
The package is released as tilg
, use:
npm i tilg
to install it with npm. Or you can choose another package manager.
Simply insert the useTilg()
hook into the component, and it will log the render, mount, unmount events in the console:
import useTilg from 'tilg'
function MyButton() {
useTilg()
return <button>Click me</button>
}
Logs of render and mount events.
You might noticed that it also displays the name and props of the component, which is very helpful for debugging.
import useTilg from 'tilg'
function MyButton({ text }) {
useTilg()
return <button>{text}</button>
}
function Title({ children }) {
useTilg()
return <h1>{children}</h1>
}
export default function Page() {
return (
<>
<Title>Welcome!</Title>
<MyButton text='foo' />
<MyButton text='bar' />
</>
)
}
When there’re multiple elements of the same component being rendered, it adds a counter <MyButton/> (2)
for distinguishing so you know who is logging the information:
Information of the logged components.
Another critical thing is to know why does a component re-renders. useTilg
gives you a simple but powerful API for this:
import { useState } from 'react'
import useTilg from 'tilg'
function Counter() {
const [count, setCount] = useState(0)
useTilg()`count = ${count}`
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
When appending a template literal to the useTilg()
call, it will also be displayed as the debug message:
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.
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:
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 (
<>
<input onChange={(e) => setInput(e.target.value)} value={input} />
<button onClick={() => setCount(count + 1)}>{count}</button>
</>
)
}
A hint for the updated part.
If you don't need a debug message but only want to quickly log some values, just pass them to the hook directly:
import { useState } from 'react'
import useTilg from 'tilg'
function MyApp() {
const [input, setInput] = useState('')
const [count, setCount] = useState(0)
useTilg(input, count)
return (
<>
<input onChange={(e) => setInput(e.target.value)} value={input} />
<button onClick={() => setCount(count + 1)}>{count}</button>
</>
)
}
Debug values quickly.
You can use Markdown's code (`
), italic (_
or *
), and bold (__
or **
) syntax in your debug message to make it look nicer:
function MyApp() {
const [count, setCount] = useState(0)
useTilg()`**Debug**: \`count\` = _${count}_.`
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
Markdown syntax in log messages.
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()
:
function MyApp() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{
+ useTilg(count)
}</button>
}
Log and return the original value.
Even if you have multiple useTilg()
hooks in the same component, the lifecycle events will only be logged once per component:
function MyApp() {
const [input, setInput] = useState('')
const [count, setCount] = useState(0)
useTilg()
useTilg()`input = ${input}`
useTilg()`count = ${count}`
return (
<>
<input onChange={(e) => setInput(e.target.value)} value={input} />
<button onClick={() => setCount(count + 1)}>{count}</button>
</>
)
}
Render, mount, and unmount events will not be duplicated even if you have multiple useTilg() hooks.
If you are running your component during SSR, or running server-side tests, useTilg()
properly outputs the result in Node.js CLI too:
function App() {
const [count, setCount] = useState(42)
useTilg()`The answer is ${{ answer: count }}`
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
Node.js CLI output.
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 useTilg`message`
?
Then it will not be identified as a hook, React Refresh and HMR will not work correctly.
The MIT License (MIT).
FAQs
A tiny logger hook for debugging React components.
We found that tilg demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.