A magical React Hook that helps you debug components.
Overview
The useTilgTiny Logger is an innovative React Hook designed to enhance your debugging experience. If you’re a React developer, you understand the challenges that come with identifying component rendering issues and understanding state changes. useTilg simplifies this process by providing real-time logs of component lifecycle events, properties, and debug messages, helping you to pinpoint problems effortlessly.
With features tailored for both beginner and advanced developers, this tool not only improves debugging efficiency but also enhances the clarity of logs. Whether you’re troubleshooting a single component or an entire application, useTilg is an essential addition to your developer toolkit.
Features
- Lifecycle Events: Automatically log the render, mount, and unmount events of your components, providing real-time insights directly in the console.
- Component Name and Props: Displays the component name along with its props, even distinguishing between multiple instances with a counter for clarity.
- Debug Message: Easily append messages to understand the reasons behind component re-renders, enhancing your debugging efficiency.
- What Has Changed?: Identifies and tracks changed arguments in the debug message, allowing you to see which state updates triggered the re-render.
- Quick Logs: For quick logging without additional debugging messages, simply pass values directly to the hook.
- Markdown Support: Utilize Markdown syntax in your debug messages to improve readability with code formatting, italics, and bold text.
- Return Original Value: The hook returns its first argument, making in-place debugging quick and straightforward.
- Auto Deduplication: Prevents duplicate logs for multiple useTilg hooks within the same component, keeping your logs clean and manageable.
