render-doctor

Render Doctor

renderDoctor is a React higher-order component for diagnosing unnecessary renders and identifying faulty selectors. It adds a logger function to a component that lists all changed props and state. Additionally, it checks if changed props are deeply equal, to identify unnecessary renders.

Usage

Decorate the component you are investigating with renderDoctor:

import renderDoctor from 'render-doctor';

@renderDoctor
export default class ComponentToCheck extends Component {
	...component code
};

renderDoctor will then automatically send diagnoses about the decorated component's props and state to the console.

Additionally, renderDoctor logs an object to the console containing the old and new props and state, as well as a property deepEqual, which is either true or an object containing the differences between the old and new objects.

When the component is in use, the internal function compareObjects used to compare props and state is also exported to window to ease debugging.

Installation

Using npm:

$ npm i -g npm
$ npm i --save-dev render-doctor