# Why Did You Render
[](https://badge.fury.io/js/%40welldone-software%2Fwhy-did-you-render)
`why-did-you-render` monkey patches **`React`** to notify you about avoidable re-renders. (Works with **`React Native`** as well.)
For example, when you pass `style={{width: '100%'}}` to a big pure component and make it always re-render:
It can also help you to simply track when and why a certain component re-renders.
## Read More
* You can read more about the library [>> HERE <<](http://bit.ly/wdyr1).
* Part 2 - **Common fixing scenarios** this library can help to eliminate can be found [>> HERE <<](http://bit.ly/wdyr02).
* Part 3 - **React Hooks** - Understand and fix hooks issues [>> HERE <<](http://bit.ly/wdyr3).
* Part 4 - **React-Redux** - Understand and fix react-redux issues [>> HERE <<](http://bit.ly/wdyr04).
## Sandbox
You can test the library in the official sandbox [>> HERE <<](http://bit.ly/wdyr-sb).
## Setup
```
npm install @welldone-software/why-did-you-render --save
```
or
```
yarn add @welldone-software/why-did-you-render
```
> *Notice: the required **React version** for the library is **>=16.8** but it might work with older versions by using `trackHooks: false` in `whyDidYouRender`'s init options.*
## Installation
Execute `whyDidYouRender` with `React` as it's first argument.
```js
import React from 'react';
if (process.env.NODE_ENV !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React);
}
```
If you are building for latest browsers and don't transpile the "class" keyword use the "no-classes-transpile" dist:
```js
import React from 'react';
if (process.env.NODE_ENV !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js');
whyDidYouRender(React);
}
```
Not doing so will [result in a bug](https://github.com/welldone-software/why-did-you-render/issues/5)
where a transpiled class tries to extend a native class:
`Class constructors must be invoked with 'new'`.
## Usage
Mark all the components you want to be notified about their re-renders with `whyDidYouRender` like so:
```js
class BigListPureComponent extends React.PureComponent {
static whyDidYouRender = true
render(){
return (
//some heavy render you want to ensure doesn't happen if its not neceserry
)
}
}
```
Or like this:
```js
const BigListPureComponent = props => (
//some heavy component you want to ensure doesn't happen if its not neceserry
)
BigListPureComponent.whyDidYouRender = true
```
You can also pass an object to specify more advanced settings:
```js
EnhancedMenu.whyDidYouRender = {
logOnDifferentValues: true,
customName: 'EnhancedMenu'
}
```
- `logOnDifferentValues`:
Normally only re-renders that are caused by equal values in props / state trigger notifications:
```js
render(