Why Did You Render Mr. Big Pure React Component???

Tracking unnecessary React component re-renders using the @welldone-software/why-did-you-render library

Vitali Zaidman
Nov 19, 2018 · 3 min read
Image for post
Image for post
Image for post
Image for post
Notice how {width: ‘100%’} is recreated on every render thus it is different on every render.
const bigListStyle = {width: '100%'}
const Main = () => (
....
<BigListPureComponent style={bigListStyle} {...manyOtherProps}/>
)

Remember: You develop on a very strong computer so you would probably not notice performance issues when developing. Your customers, on the other hand, would not miss them. If you want your users to have the best experience, you must find a way to monitor and fix these issues.

class BigListPureComponent extends React.PureComponent {static whyDidYouRender = true// a lot of logic and handlers
render(){
return (
// a list of 1000000000000 entries
)
}
}
Image for post
Image for post

Reporting

Enforcing

Chrome is Great

Image for post
Image for post

Enjoy Tracking Updates :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.

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