Why Did You Render Mr. Big Pure React Component Part 2- Common Fixing Scenarios

What to do with the many console logs you are probably about to receive when you start using @welldone-software/why-did-you-render?

Vitali Zaidman
Nov 19, 2018 · 4 min read

In the previous article we introduced you to the @welldone-software/why-did-you-render library. Let’s look on some common scenarios you’ll encounter when using it:

Different Props

This notification is caused by re-rendering of a component when it’s props did not change but the props object did change.

Let’s take the following component for example:

If FatherComponent re-renders because props.something changed, ClassDemo would re-render as well. If this is a “heavy” component, you would want to prevent it’s re-rendering.

Because the props object is always new for each re-render of a child. This means, in our case, for ClassDemo:
prevProps !== nextProps, but:
prevProps.a === nextProps.a

Always remember: the <jsx prop='a'/> syntax is just a sugar for: React.createElement('jsx', {prop: 'a'}). This means whenever it’s father re-renders, jsx tries to update itself with a new props object.

This would trigger the following notification in the console:

Image for post
Image for post

To deal with it you can Make ClassDemo a pure component or to refactor the code to not trigger the update of FatherComponent somehow.

Different State

This scenario is exactly like the previous one but with states.

If the current state is: {stateKey: 'stateValue'} and you call:

a render will occur although the actual state did not change:

prevState !== nextState, but:
prevState.stateKey === nextState.stateKey

Image for post
Image for post

To deal with it, make sure to not set state where it doesn’t have to change:

You can also make ClassDemo a pure component. But making components pure can be costly and not suggested in this case.

Props or State Equals by Value

If your state is {c: {d: 'd'}} and you call

a render will occur although the actual state did not change (by value):

prevState !== nextState, and
prevState.objectKey !== nextState.objectKey, but:
prevState.c.d === nextState.c.d

The same can happen with props if you render a component like this:

prevProps !== nextProps, and prevProps.a !== nextProps.a, but:
prevProps.a.b === nextProps.a.b

Image for post
Image for post

Usually this is caused by creating a React component or a default value inside the render instead of creating it in advance. For example:

Both can be solved by moving them outside of the render function:

Children / React Elements

When we use JSX, we actually call React.createElement.

The reason why <SomeComponent/> !== <SomeComponent/> is that every reactElement created is a new immutable React Element.

This is true for children as well. Children are just props.

So what usually happens is that you want something to be pure but pass a new reactElement to it all the time:

The result is the following error:

Image for post
Image for post

This is because it is equivalent to:

And when react shouldComponentUpdate runs it re-renders since:

A good way to deal with it is to create a pure wrapper:

This will ensure your father never re-renders.

React-Redux

The same scenario can be triggered by a React Redux store update when no update is actually needed:

if the state is state === {hello: {world: 'hi!'}

and you dispatch an action with the same payload as the state:
dispatch({action: 'some-action', payload: {hello: {world: 'hi!'}}).

Your connected connect(state => {hello: state.hello}) would trigger an update on the component with a different hello prop.

Equal Dates, Regular Expressions, React Components and Functions

All of these can trigger renders when their instance is recreated. For example:

The library detects these and reports about them:

Image for post
Image for post

Enjoy Improving Your User’s Experience :D

Welldone Software

The leading full-stack consultancy.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store