https://github.com/sasoder/use-why-rerender

A lightweight drop-in React hook for finding out which props cause a component to re-render
https://github.com/sasoder/use-why-rerender

hooks npm npm-package react

Last synced: 4 months ago
JSON representation

A lightweight drop-in React hook for finding out which props cause a component to re-render

• Host: GitHub
• URL: https://github.com/sasoder/use-why-rerender
• Owner: sasoder
• License: mit
• Created: 2024-12-17T11:01:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-08T17:10:52.000Z (over 1 year ago)
• Last Synced: 2025-09-16T15:44:28.698Z (9 months ago)
• Topics: hooks, npm, npm-package, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-why-rerender
• Size: 18.6 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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.

![npm](https://img.shields.io/npm/v/use-why-rerender)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-why-rerender)

![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)

![React](https://img.shields.io/badge/React-18%2B-blue)

![License](https://img.shields.io/npm/l/use-why-rerender)

## Installation

```bash

npm install -D use-why-rerender

```

## Usage

```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

```

### Configuration Options

```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 |

## License

MIT