Detect unnecessary renders in React with why-did-you-update

why-did-you-update is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props their values are the same.

Installation per npm, of course:

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

No need to adjust all your components either, why-did-you-update works by patching React itself:

import React from 'react'

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

why-did-you-update →