Menu
The official React docs state that "React.PureComponent's shouldComponentUpdate() only shallowly compares the objects", and advises against this if state is "deep".
Given this, is there any reason why one should prefer React.PureComponent when creating React components?
Questions:
React.Component that we may consider going for React.PureComponent?shouldComponentUpdate() of PureComponent performs only shallow comparisons. If this is the case, can't said method be used for deeper comparisons?React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?Question arose from reading into this medium blog, if it helps.
318
It is the type of component which re-renders only when the props passed to it changes and not even if its parent component re-renders or if the shouldComponentUpdate()method is called. It is greatly used to enhance the performance of a web application.
To sum it up, PureComponent is useful when: You want to avoid re-rendering cycles of your component when its props and state are not changed, and. The state and props of your component are immutable, and. You don't plan to implement your own shouldComponentUpdate lifecycle method.
A React component is considered pure if it renders the same output for the same state and props. For this type of class component, React provides the PureComponent base class. Class components that extend the React. PureComponent class are treated as pure components.
A React element is an object representation of a DOM node. A component encapsulates a DOM tree. Elements are immutable i,e once created cannot be changed. The state in a component is mutable.
The major difference between React.PureComponent and React.Component is PureComponent does a shallow comparison on state change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.
You should go for React.PureComponent when you can satisfy any of the below conditions.
forceUpdate when data changesIf you are using React.PureComponent you should make sure all child components are also pure.
is there any performance impact in using React.component that we may consider going for React.PureComponent?
Yes, it will increase your app performance (because of shallow comparison)
I am guessing shouldComponentUpdate() of Purecomponent performs only shallow comparisons . If this is the case can' t the said method used for deeper comparisons?
You guessed it correctly. You could use it if you satisfy any of the conditions I mentioned above.
"Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?
Yes, prop changes will be ignored If it couldn't find difference in shallow comparison.
84
Component and PureComponent have one differencePureComponent is exactly the same as Component except that it handles the shouldComponentUpdate method for you.
When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.
When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.
Source: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
