There is old article by Dan Abramov about splitting component in container and presentational part.
What I don't see in any article about this React pattern is usage of PureComponent for presentational component.
Is there any reason I should not use PureComponent by default for every presentational component?
If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
https://reactjs.org/docs/react-api.html#reactpurecomponent
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.
Thanks to React hooks, we started developing all the components as functional components. But we miss the PureComponent which avoided unnecessary rerenders. We used to create every component extending PureComponent.
My questions are: Shall we just blindly wrap all our functional components with React.memo? Will it slow down or affect the application in any way? Is there any situation where we should not wrap the functional components with React.memo?
Yes, React.memo, PureComponent and shouldComponentUpdate for classes can all have a negative performance effect as they carry a small calculation cost, so if you know your component is not a pure component you should be careful in how and when you use them.
The following links has the answer to my question.
https://dmitripavlutin.com/use-react-memo-wisely/
https://github.com/facebook/react/issues/14463
Before react introduce memo and hook All functional component was stateless.
After Introducing memo and hook I'm little confused with these two concept.
Is React.memo for functions that use hook only?
Should I update all my stateless functional component to React.memo for optimizing? Or react optimize it when a function does not use hook automatically?
For understanding what React.memo is used for, first you have to understand the difference between React.Component and React.PureComponent.
From the docs -
The difference between them is that React.Component doesn’t implement
shouldComponentUpdate(), but React.PureComponent implements it with a
shallow prop and state comparison.
If your React component’s render() function renders the same result
given the same props and state, you can use React.PureComponent for a
performance boost in some cases.
React.memo is the same as a React.PureComponent, just for the functional components. So, if you think that with a given props, your component will be rendered the same, you can wrap your component with React.memo for performance boost and memoizing the result as mentioned in the docs.
But do specifically take a look at the line in the docs, which says -
This method only exists as a performance optimization. Do not rely on
it to “prevent” a render, as this can lead to bugs.
And you should make your decision about using React.memo irrespective of the hooks.
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.