I've been playing around with React 16.6.0
recently and I love the idea of React Memo, but I've been unable to find anything regarding scenarios best suited to implement it.
The React docs (https://reactjs.org/docs/react-api.html#reactmemo) don't seem to suggest any implications from just throwing it on all of your functional components.
Because it does a shallow comparison to figure out if it needs to re-render, is there ever going to be a situation that negatively impacts performance?
A situation like this seems like an obvious choice for implementation:
// NameComponent.js import React from "react"; const NameComponent = ({ name }) => <div>{name}</div>; export default React.memo(NameComponent); // CountComponent.js import React from "react"; const CountComponent = ({ count }) => <div>{count}</div>; export default CountComponent; // App.js import React from "react"; import NameComponent from "./NameComponent"; import CountComponent from "./CountComponent"; class App extends Component { state = { name: "Keith", count: 0 }; handleClick = e => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <NameComponent name={this.state.name} /> <CountComponent count={this.state.count} /> <button onClick={this.handleClick}>Add Count</button> </div> ); } }
Because name
will never change in this context, it makes sense to memoize.
But what about a situation where props change frequently?
What if I added another button that changed something else in state and triggered a re-render, would it make sense to wrap CountComponent
in memo, even though this component by design is meant to update frequently?
I guess my main question is as long as everything remains pure, is there ever a situation to not wrap a functional component with React Memo?
It is best to use React. memo() when: Components are rendered too frequently and slow down the application. Component renders' cost is high (When the loading time is more than 100ms).
memo() to improve performance. React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React. memo can help you to optimize the number of renders of your React components even further.
If the component isn't heavy and usually renders with different props, most likely you don't need React. memo() . Use the following rule of thumb: don't use memoization if you can't quantify the performance gains. Performance-related changes applied incorrectly can even harm performance.
The short answer is no. Both are used to optimise performance in regard to reducing unnecessary re-rendering, but React. memo and useMemo are used for two different scenarios... React.
React.memo
LITERALLY, as comparing the tree returned by the Component is always more expensive than comparing a pair of props
propertiesSo don't listen to anyone and wrap ALL functional components in React.memo
. React.memo
was originally intended to be built into the core of functional components, but it is not used by default due to the loss of backward compatibility. (Since it compares the object superficially, and you MAYBE are using the nested properties of the sub-object in the component) =)
That's it, this is the ONLY REASON why React doesn't use memo Automatically. =)
In fact, they could make version 17.0.0, which would BREAK backward compatibility, and make React.memo
the default, and make some kind of function to cancel this behavior, for example React.deepProps
=)
Stop listening to theorists, guys =) The rule is simple:
If your component uses DEEP COMPARING PROPS then don't use memo, otherwise ALWAYS use it, comparing TWO OBJECTS is ALWAYS CHEAPER than calling React.createElement()
and comparing two trees, creating FiberNodes, and so on.
Theorists talk about what they themselves do not know, they have not analyzed the react code, they do not understand FRP and they do not understand what they're advising =)
P.S. if your component is using children
prop, React.memo
will not work, because children
prop always makes a new array. But It is better not to bother about this, and even such components should ALSO be wrapped in React.memo
, since the computing resources are negligible.
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