React - Why Did You Render?

websecurity
Back

For Example:

const Main = () => (
....
<BigListPureComponent style={{width: '100%'}} {...manyOtherProps} />
)

Point to note is: always-new style object was passed to the component.

The problem with always-new style object is that: It will caus the whole list to re-render on every rendering of it’s father (Main). Even if none of the other props changed.

Because behind the scene React is doing comparison like:

prevProps.style !== nextProps.style;

and the return value from this costly calculation is always true.

To fix this: Move all your static objects/reference data types to out of component like:

const bigListStyle = {width: '100%'}
const Main = () => (
....
<BigListPureComponent style={bigListStyle} {...manyOtherProps} />
)

Then it would not re-render when Main re-renders.

So bet is to move all your static objects/reference data types to out of component.

Reference

Thanks.

MIT © Mohan Dere.
-