/why-did-you-update

:boom: Puts your console on blast when React is making unnecessary updates.

Primary LanguageJavaScriptMIT LicenseMIT

Why did you update

Build Status npm version

Why did you update is a function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur.

Setup

This library is available on npm, install it with: npm install --save why-did-you-update or yarn add why-did-you-update.

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 and exclude options

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 and collapseComponentGroups options:

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

A notifier can be provided if the official one does not suite 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 });

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.