Development & Debugging
useRenderCount
About
A simple debugging hook that tracks how many times a component has rendered. Useful for identifying unnecessary re-renders and optimizing component performance.
Examples
Basic example
import { useRenderCount }from "rooks";export default function App() { const renderCount = useRenderCount(); return ( <div> <h1>Component Render Count</h1> <p>This component has rendered {renderCount} times</p> </div> );}Debugging unnecessary re-renders
import { useState }from "react";import { useRenderCount }from "rooks";export default function App() { const [count,setCount]= useState(0); const [name,setName]= useState(""); const renderCount = useRenderCount(); return ( <div> <h1>Debugging Re-renders</h1> <p>Render count: {renderCount}</p> <div> <label>Counter: {count}</label> <button onClick={()=> setCount(c => c+ 1)}>Increment</button> </div> <div> <label>Name:</label> <input value={name} onChange={(e)=> setName(e.target.value)} placeholder="Type your name" /> </div> {renderCount> 10 && ( <div style={{color:'red'}}> Warning: This component has re-rendered {renderCount} times! </div> )} </div> );}Conditional behavior based on render count
import { useState, useEffect }from "react";import { useRenderCount }from "rooks";export default function App() { const [data,setData]= useState(null); const renderCount = useRenderCount(); // Only show loading indicator after first render const showLoading = renderCount=== 1 && !data; useEffect(()=> { // Simulate data loading const timer = setTimeout(()=> { setData("Data loaded successfully!"); },2000); return ()=> clearTimeout(timer); }, []); return ( <div> <h1>Conditional Rendering Example</h1> <p>Render #{renderCount}</p> {showLoading&& <p>Loading...</p>} {data&& <p>{data}</p>} <button onClick={()=> setData(null)}>Reset Data</button> </div> );}Arguments
This hook does not accept any arguments.
Returns
| Return value | Type | Description |
|---|---|---|
| renderCount | Number | The number of times the component has rendered (starts from 1) |
Use Cases
- Performance Debugging: Identify components that re-render too frequently
- Development Tools: Build custom debugging components that show render information
- Conditional Logic: Execute code only after a certain number of renders
- Testing: Verify that optimizations are working correctly
- Component Analysis: Understand how state changes affect component rendering
Notes
- The render count starts from 1 (not 0) on the first render
- Each call to the hook maintains its own independent render count
- The count persists for the lifetime of the component
- This hook is primarily intended for development and debugging purposes