MENU


Why Did You Render

This tool allows you to understand when your React components get rendered or re-rendered. It tells you when avoidable renders start happening and most importantly why. Its latest release supports React 19 (use the ^8 release line if your project is still on React 18). To install it:

Installing why-did-you-render
npm install @welldone-software/why-did-you-render --save-dev

To import it:


import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

To use it on a class component:


class BigListPureComponent extends React.PureComponent {
  static whyDidYouRender = true;
  render() {
    return (
      <div>{/* some heavy render you want to ensure doesn't happen if it is not necessary */}</div>
    );
  }
}

Or, on a memoized function component (the direct equivalent of PureComponent for function components):


const BigList = React.memo(function BigList(props) {
  return (
    <div>{/* some heavy render you want to ensure doesn't happen if it is not necessary */}</div>
  );
});
BigList.whyDidYouRender = true;