Deprecated

why-did-you-update is now deprecated.

Please use @welldone-software/why-did-you-render instead. It supports the latest React, tracks hooks, and does much more to improve performance.

Why did you update

Why-did-you-update

Setup

This library is available on npm, install it with:

npm install --save why-did-you-update

yarn add why-did-you-update

Sandbox

You can test the library >> HERE << (notice the console).

Version 1 Update With Breaking Changes

Check out the releases page.

We now only support React 16+

To work with older versions of react, install an older version of this library:

npm install --save [email protected]

yarn add [email protected]

Usage

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update');
  whyDidYouUpdate(React);
}

Options

Optionally you can pass in options as a second parameter. The following options are available: -

include: [RegExp]

exclude: [RegExp]

groupByComponent: boolean

collapseComponentGroups: boolean

notifier: (groupByComponent: boolean, collapseComponentGroups: boolean, displayName: string, diffs: [Object]) => void

include / exclude

You can include or exclude components by their displayName with the

include

exclude

whyDidYouUpdate(React, { include: [/^pure/], exclude: [/^Connect/] });

groupByComponent / collapseComponentGroups

By default, the changes for each component are grouped by component and these groups collapsed. This can be changed with the

groupByComponent

collapseComponentGroups

whyDidYouUpdate(React, { groupByComponent: true, collapseComponentGroups: false });

notifier

A notifier can be provided if the official one does not suit your needs.

const notifier = (groupByComponent, collapseComponentGroups, displayName, diffs) => {
  diffs.forEach(({name, prev, next, type}) => {
    // Use the diff and notify the user somehow
  });
};
whyDidYouUpdate(React, { notifier });

Common Fixing Scenarios

Value Did Not Change

If you receive the message:

X.[props/state]: Value did not change. Avoidable re-render!`

X

js
prevProps === props

js
prevState === state

If both the state and the props are the same object, it means the render was caused by

this.forceUpdate()

ReactDom.render()

js
prevProps === props && prevState === state

Not Equal by Reference

If you receive the message:

"X" property is not equal by reference.

js
const a = {"c": "d"}
const b = {"c": "d"}
a !== b

js
const a = {"c": "d"}
const b = a
a === b

Changes Are in Functions Only

If you receive the message:

Changes are in functions only. Possibly avoidable re-render?

js
render(){
  return 

}

js
function something(){...} !== function something(){...}

js
constructor(props){
  super(props)
  this.something = this.something.bind(this)
}
something(){
  ...
}
render(){
  return 

}


Credit

I originally read about how Benchling created a mixin to do this on a per-component basis (A deep dive into React perf debugging).
That is really awesome but also tedious AF, so why not just monkey patch React.

License

why-did-you-update is MIT licensed.