Why render?

Helper functions for comparing payloads and debugging rendering issues in React components.

Note: this package is for debugging/testing only, and should not be merged into production code

Installation

yarn add --D @oliasoft-open-source/why-render

Compare Payloads

There is a general-purpose function explainDifferences which compares (diffs) two arguments and explains why they are different. This can be used in any context, not just React-code.

import { explainDifferences } from '@oliasoft-open-source/why-render';

explainDifferences(objectA, objectB);

Debugging React Renders

There are React helper functions for debugging why components are re-rendering.

To use for function components:

import { useWhyRender } from '@oliasoft-open-source/why-render';

const Component = (props) => {
    useWhyRender(props);
}

To use for class components:

import { whyRender } from '@oliasoft-open-source/why-render';

componentDidUpdate(prevProps, prevState) {
  whyRender(prevProps, this.props, prevState, this.state);
}

Alternatively, there is a HOC which can be used to wrap components:

import { withWhyRender } from '@oliasoft-open-source/why-render';

const WrappedComponent = withWhyRender(SimpleComponent);

Debugging React Render times

There are also React helper functions for debugging render time.

The useInitTime hook measures the init time of a component (time before its first render, not its rendering time).

import { useInitTime } from '@oliasoft-open-source/why-render';

const Component = (props) => {
    useInitTime();
}