Docs
useRenderDebugger

Logs prop/state changes between renders to help debug unnecessary re-renders.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-render-debugger

Usage

"use client"
 
import { useRenderDebugger } from "@/hooks/use-render-debugger"
 
export function Component() {
  const [count, setCount] = useState(0)
 
  useRenderDebugger({
    componentName: "Component",
    props: { count },
    options: {
      trackOnly: ["count"],
    },
  })
 
  return (
    <Button
      onClick={() => {
        setCount((prev) => prev + 1)
      }}
    >
      Count: {count}
    </Button>
  )
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
componentNamestringName of the component for logging.-No
propsTPropsProps to be logged.-No
options.trackOnlyArray<keyof TProps>Array of prop names to track.-Yes
options.logger(message: string, changes: Record<string, { from: unknown; to: unknown }>) => voidCustom logger function.console.logYes
useRenderCountuseRerender