A React hook to track and debug prop changes in components
npm install use-why-rerenderA lightweight drop-in React hook for finding out which props cause a component to re-render. Supports nested data structures and object reference changes.
!npm
!npm bundle size
!TypeScript
!React
!License
``bash`
npm install use-why-rerender
`typescript
import useWhyRerender from 'use-why-rerender';
function MyComponent({ user, items, onUpdate }) {
const [count, setCount] = useState(0);
useWhyRerender({ user, items, onUpdate, count }, { caller: 'MyComponent' });
return (
// your component
);
}
`
This will produce console output like:
`
🔁 Render #1 - MyComponent
user:
prev: { id: 1, name: "John" }
next: { id: 1, name: "Jane" }
items: Object reference changed but shallowly equal
🔁 Render #2 - MyComponent
count:
prev: 0
next: 1
`
`typescript`
useWhyRerender(props, {
deep: true, // enable deep equality comparison
enabled: true, // enable/disable logging
debounceMs: 100, // debounce logs
caller: 'MyComponent' // name of caller for logging
});
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| deep | boolean | false | Enable deep equality comparison |enabled
| | boolean | true | Enable/disable logging |debounceMs
| | number | 0 | Logging delay in milliseconds |caller` | string | - | Calling component identifier |
|
MIT