useRenderInfo

Log render information for debugging.

Utility

API Reference

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useRenderInfo } from "@shak-hooks/usehooks";

Source: packages/react/src/useRenderInfo.ts

signature.ts

export function useRenderInfo(name: string = 'Component')

Name	Type	Optional	Default
name	string	Yes	'Component'

unknown

use-render-info.ts

1import { useEffect, useRef } from "react";

3export function useRenderInfo(name: string = "Component") {

4 const count = useRef(0);

5 const lastRender = useRef(Date.now());

7 useEffect(() => {

8 const now = Date.now();

9 count.current++;

11 console.log(`${name} rendered ${count.current} times`);

12 console.log(`Time since last render: ${now - lastRender.current}ms`);

14 lastRender.current = now;

15 });

16}

Google Ads

example.tsx

1import { useRenderInfo } from "@shak-hooks/usehooks";

3const result = useRenderInfo(undefined);

4// result: unknown

5// Use values directly (React state).