// the find
shuding/tilg
A magical React Hook that helps you debug components.
tilg is a React hook that logs a component's mount, render, and unmount events to the console, along with the component name, its props, and an optional template-literal debug message. It is for developers who want quick visibility into why a component re-renders during development. Production builds compile it to a no-op.
The template-literal form keeps `useTilg` a real hook, so React Refresh and HMR keep working, which is the reason the README gives for not using a plain tagged-template API. The hook compares its interpolated arguments with the previous render and reports which one changed, which answers the usual why-did-this-re-render question without manual logging. Multiple calls in one component collapse into a single lifecycle log, and the hook returns its first argument, so you can wrap an expression inline without restructuring the code. It also prints in Node, so SSR output and server-side tests get the same logs.
The last push was in December 2022, and the README calls the implementation 'very hacky' and links to a line in React's own index.js, so a React upgrade can break it. The README documents no log filtering, levels, or per-component toggles, so a large component tree will flood the console quickly. The production no-op keeps the bundle clean, but the author still recommends deleting the calls before shipping, so that cleanup is manual. The test directory has a single test file, so treat this as a development convenience rather than something to depend on across React versions.