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.
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
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
I use a lot of React functional components in my application. Is this a right time to consider replacing my functional components with React's new React.memo() API? Will it really improve the performance? If i use React.memo() instead of functional components every time React has to check whether my new props and previous props are the same or not, and then needs to update my component. Will it be a burden for React and decrease my performance?
Any suggestions ?
You won't have to replace your functional components, as memo is a higher order component you wrap around your existing component. It will improve performance because you will no longer have any unnecessary re-renders of your functional components if their props haven't changed. From the React docs (https://reactjs.org/docs/react-api.html#reactmemo):
If your function component renders the same result given the same
props, you can wrap it in a call to React.memo for a performance boost
in some cases by memoizing the result. This means that React will skip
rendering the component, and reuse the last rendered result.
You don't have to worry about "replacing" your component, you can just wrap the export function like this
export default React.memo(YourComponent);
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.