Patch React to discover unnecessary re-renders


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Oct 23, 2017Oct 23, 2017Minified + gzip package size for @nemo.travel/why-did-you-update in KB


Why did you update, bruh?

Travis npm version


A function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur. Super helpful for easy perf gainzzzzz.


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

How to

import React from 'react'

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

You can include or exclude components by their displayName with the include and exclude options

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

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

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


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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.