Debug react component rerender

Question

I'm trying to debug bug that is reproduced very rarely (once per several dozens of trys).

I'm inside of render call and want to find out as much information as possible from there:

• What caused rerender: forceUpdate , setState or props changed?
• If it was a props change, which component initiated chain of rerenders: I mean not the fact of parent render, but the top component from parents chain that has used setState or forceUpdate and so caused rerender of itself and the whole tree bellow (including the component I'm currently in).

It's guaranteed that all components are class components (not functional) and I'm using react 16.4.2 including deprecated lifecycle methods (if it is important). There are some usages of context too.

How can I make it? Note, I'm asking about debug techniques, not about fixing my concrete bug.

Answer 1

If your component is a pure component - extends React.PureComponent {... } , you don't really have to care about the whole chain of re-renders, since it will re-render only if props have changed (from the chain or from the redux store).

It will not re-render if parent state changed or if parent basically has re-rendered.

However , it will still re-render - as I mentioned above - if props have changed or state inside that component was updated or forceUpdate function was called.

If you are not calling forceUpdate inside your component or you are not updating the state, the issue may be related with the props.

You could use eg componentDidUpdate and simply compare the prevProps with this.props and check which one of the props has changed.

Nonetheless, you can also check https://www.npmjs.com/package/@welldone-software/why-did-you-render package, it might be helpful for you.