# why-did-you-render

> Track why your vue components are updating

Latest version **1.0.1** (published 2020-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install why-did-you-render
pnpm add why-did-you-render
yarn add why-did-you-render
bun add why-did-you-render
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-05-17 |
| First published | 2020-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Gerard Rodes |
| Maintainers | gerardrv |

## Links

- npm: https://www.npmjs.com/package/why-did-you-render
- Repository: https://github.com/GerardRodes/why-did-you-render
- Homepage: https://github.com/GerardRodes/why-did-you-render#readme
- Issues: https://github.com/GerardRodes/why-did-you-render/issues
- npm.io page: https://npm.io/package/why-did-you-render

## Recent versions

- 1.0.1 (latest) — 2020-05-17

## README

# why-did-you-render
Track why your vue components are updating

Sometimes a component is updating causing a rerender and you know that it shouldn't do it.
Most of the times it is because a new object is created on some parent component, althought it hold the same values, it causes an update.

## Usage
```js
import WhyDidYouRender from 'why-did-you-render'

// install it as a global mixin
Vue.mixin(WhyDidYouRender)

export default {
  name: 'MyComponent',
  debug: true, // set this flag
}
```

It will log something like this
```
[WhyDidYouRender:watcher] MyComponent propName { val: currentValue, old: previousValue }
[WhyDidYouRender:watcher] MyComponentParent parentComputedName { val: currentValue, old: previousValue }
[WhyDidYouRender:UPDATED] MyComponent
```

We can see that the `MyComponent` has updated and it has been caused by a prop named `propName` and we can see too that its parent has also experience a mutation on something named `parentComputedName`, it looks like the trigger which caused our component to update.

We will receive also the current and previous values of the mutated variables


## How does it work?
Very simple, it just adds a watchers for everything inside the component with the `debug: true` flag and does the same recursively for its parent recursively.

In a first instance I was skipping adding watchers on inner Vue attributes, those that start with `_` or `$`, but sometimes the mutation was caused by `$attrs` or `$listeners` when using `v-on="$listeners"` or `v-bind="$attrs` and this helps to track it too.

## Inspiration
I just wanted something like https://github.com/welldone-software/why-did-you-render#readme but for Vue

---
_Source: https://npm.io/package/why-did-you-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._