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
Related
I'm doing on migration all of my class component to functional component using mobx-react
I wonder all of my components should wrapped by observer or not.
I guess there might be three scenarios.
observable states are being called and used.
observable states are been passed into props
purely stateless component.
let's say all of three components above are functional component.
Should I wrap all the components above with observer of mobx-react?
cf) Is there any articles or benchmarking compares to #observer decorators of mobx ?
Basically this https://mobx.js.org/refguide/observer-component.html#when-to-apply-observer and https://mobx.js.org/best/pitfalls.html#use-observer-on-all-components-that-render-observable-s
You usually wrap everything in observer, exception might be components which only render primitives or something like this, but it is tedious to track it so usually you just wrap all of them.
Mobx's guideline is to put it on any component that reads observable data:
https://mobx.js.org/react-integration.html#always-read-observables-inside-observer-components
If I understood the question correctly, the right answer is on the documentation Mobx site:
You might be wondering, when do I apply observer?
You might be wondering, when do I apply observer? The rule of thumb is: apply observer to all components that read observable data.
observer only enhances the component you are decorating, not the components called by it. So usually all your components should be wrapped by observer. Don't worry, this is not inefficient. On the contrary, more observer components make rendering more efficient as updates become more fine-grained.
p.s.:
there are broken links in first reply,
In the past, in ReactJS, one way was to divide our components into Container components and Presentational components, and even Dan Abramov
wrote a note about it not any more the case if we can use Hooks now.
How should it be done now — how does Hooks solve the problem?
The question is more like: even with function components that can have states, should we still design our app to have container components that have states, and have presentational components that strictly do not have state, and therefore is like "pure function" to take props and present data. Or should we not care and use states in every component we have?
With hooks, you can make functional components stateful here is an example
Const Component =()=>{
Const [count, setCount]=useState(0);
Return(
<Button
onClick={()=>setCount(count+1)}
>{count}</Button>)}
** and if you compare both class-based components and functional components you will see how hooks make it less code and cleaner to read and understand hope I explained well! **
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 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.