According to the docs, React.Component doesn't implement shouldComponentUpdate ?
So how about a lifecycle of a component (the-component-lifecycle) (shouldcomponentupdate) ?
React.PureComponent is similar to React.Component. The difference
between them is that React.Component doesn’t implement
shouldComponentUpdate(), but React.PureComponent implements it with a
shallow prop and state comparison.
By default, using Component, shouldComponentUpdate returns true (no diffing of props happens), unless its defined by you (result dependent of what you put in). Using PureComponent react does a shallow diff of props by default.
Feel free to take a look at the react source code, roughly, it checks if shouldComponentUpdate is defined and is a function. Then checks if it is a pure component, then returns true by default.
https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberClassComponent.js
Related
I need to know what is the meaning of shallow comparison when using PureComponent. Actually I read some treats but I could not understand the meaning of that so please simplify it.
An other question is, when we could use PureComponent and when using shouldComponentUpdate?
About Shallow Comparison you can check this answer
https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react#:~:text=Shallow%20compare%20is%20efficient%20way,you%20don't%20mutate%20data.&text=shallow%20comparison%20is%20when%20the,comparisons%20deeper%20into%20the%20properties.
About shouldComponentUpdate [https://en.reactjs.org/docs/react-component.html#shouldcomponentupdate]
Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
Basically, the component will be re-render every single change of state, if you want to prevent it, you can use the shouldComponentUpdate().
About PureComponent[https://blog.logrocket.com/pure-functional-components-in-react-16-6/]
A React component can be considered pure if it renders the same output for the same state and props. For class components like this, React provides the PureComponent base class. Class components that extend the React.PureComponent class are treated as pure components.
I do strong recommend you to read about React Hooks[https://en.reactjs.org/docs/hooks-intro.html] It makes easy to have PureComponents and to control when and how it should be re-render.
Regards.
I wanted to know the real use case on when to use PureComponent over Component in React? What is truly the difference between the two besides the fact that PureComponent implements shouldComponentUpdate method with shallow state checking. What is the true purpose of this API
Thanks
You've kind of answered the question yourself. React.Component will always update if you haven't implemented a shouldComponentUpdate (even if the state is shallowly equal).
React.PureComponent will not not update following a shallow state check (assuming the state and props remained the same). So if you want to prevent unnecessary updates and don't want to have to implement your own shouldComponentUpdate function, then use PureComponent to help save boilerplate.
I am new to React and I want to know when should I be using a React Component and when should I be using React PureComponent?
Component:
import React, { Component } from 'react'
PureComponent:
import React, { PureComponent } from 'react'
Can I use React PureComponent everywhere?
OR
is it safe to use shouldComponentUpdate and check and return false of not required
I just read an article stating that using pure components actually cause more harm than good. they recommend using "react-update-if-changed". How much true is this?
Article: https://hackernoon.com/react-purecomponent-considered-harmful-8155b5c1d4bc
Can I use React PureComponent everywhere?
Yes, you can but trying using Functional component more and more. In case of Class component, keep it small and extend it to PureComponent or Component if you want to implement your own shouldComponentUpdate, would advise to do it when, on minimal non complex (nested deep array or/and object) props change your component needs to update.
Is it safe to use shouldComponentUpdate?
Yes, it is, if you know what you are doing, meaning that any flaw in your implementation, could lead to performance issues like unnecessary component re rendering just because your implementation of shouldComponentUpdate returned true or worse, that your component doesn't rerender on certain props change as your shouldComponentUpdate returns false due to some glitch.
The referenced medium post is trying to sell out react-update-if-changed package which seems like a good deal to go for at start but when you realize that
the real problem statement is all about performance optimization (refer https://reactjs.org/docs/optimizing-performance.html)
How to avoid unnecessary checks to determine component can update and avoid unwanted rerender ?
Pass props to component which you know is needed by the component and is going to change
In case, if there are many props being send to a component and on very few limited props change, the component needs to update and re render then you could very well implement your own shouldComponentUpdate (refer the example in the above shared link of react optimization). But be wary of props which are arrays and object, as differentiating them is a pain, especially the deep bulky nested ones.
Use a Functional (pure & stateless) component for your UI while for it's presentation logic (show-hide, sort, etc) would be present in a components which would be a Class (stateful and pure by extending it to React.PureComponent) having children prop as a function; with the help of HOC linking the logical and UI component
Do use the React Context API while trying to pass props between ancestor and descendant, especially if they are a level beyond like grand parent component to child component.
Using the last method which is all about Advanced React Patterns is the best way to have optimized performance and codebase. To understand it better, please refer Dumb and Smart Components and Presentational and Container Components.
import React, { PureComponent } from 'react'
export default Class PureComponent extends React.PureComponent{
}
import React, { Component } from 'react'
export default Class NormalComponent extends React.Component{
}
PureComponent Don’t have any Lifecycle Methods
PureComponent check shallow comparison and re-render when Needed
Use Pure Component when used when primitive data types int string boolean etc,
Note:-
PureComponent Don’t have any Lifecycle Methods
React PureComponent's shouldcomponentupdate() only shallowly compares the objects.
If I define a PureComponent that
only has a render() method, and
does not use this.state,
...is it effectively identical to a stateless functional component? Or are there any differences in behaviour or performance?
This is not a duplicate of React functional stateless component, PureComponent, Component; what are the differences and when should we use what? because the answer to my question is not contained there, at least not in a way that's easy to pinpoint. That is a big, wide-ranging question, and mine is very specific.
A stateless functional component is effectively identical to React.Component without lifecycle methods and state, not to React.PureComponent.
The whole point of React.PureComponent is to use one of the life cycle methods (shouldComponentUpdate) and make it to return true only if properties & state have changed, using shallow comparison.
There is no way how to do that in stateless functional components since they are always rendered and have no way to define shouldComponentUpdate.
This behavior is described in detail in Optimizing Performance.
I know that usually any change in the props or the state of a React Component causes it to re-render, but what are the scenarios when a setState() call can be made and not cause a re-render?
When inheriting from plain React.Component React will by default call render() on the component when either the parent component re-renders or setState is called in the component.
However, if you implement shouldComponentUpdate() in your React component you will be able to short-circuit the update cycle. This is useful if you only have a limited number of props that are primitive values (string, number, bool) or when working with immutable data structures. Then you can simply do something like this:
shouldComponentUpdate(nextProps, nextState) {
return nextState.name !== this.state.name // Don't re-render if name is equal
}
The default implementation of shouldComponentUpdate() is
shouldComponentUpdate(nextProps, nextState) {
return true;
}
It is also possible to inherit from React.PureComponent which basically implements shallow comparison of your props and state.
I would recommend the following articles for a more in-depth answer:
https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation
and https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 (Especially the section called (PureComponent and shouldComponentUpdate)
It is also useful to understand the difference between what happens when the render-function is called and what the reconciliation algorithm does to update the DOM. More on this here.