use-why-rerender

A lightweight drop-in React hook for finding out which props cause a component to re-render. Supports nested data structures and object reference changes.

Installation

npm install use-why-rerender

Usage

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

Configuration Options

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 |

License

MIT