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?
When the application is very simple and does not require saving significant changes in memory.
Right
When you don't know if you are really going to have an improvement in the application using the hook.
Right
Is there ever going to be a situation that negatively impacts performance?
Yes. You may end up with worse performance, if all components are mindlessly wrapped by React.memo.
It is not needed in many cases. To give it a try with a performance critical component, do some measures first, add memoization and then measure again to see if added complexity was worth it.
React.memo?A memoized component compares old with news props to decide, if to re-render - each render cycle.
A plain component does not care and just renders, after props/state change in a parent.
Take a look at React shallowEqual implementation, which is invoked in updateMemoComponent.
React memo?There are no hard rules. Things, that affect React.memo negatively:
Ad 1: In this case, React.memo cannot prevent a re-render, but had to do additional calculations.
Ad 2: Added comparison cost is not worth it for a "simple" component in terms of render, reconcile, DOM change and side-effect costs.
Ad 3: The more props, the more calculations. You also can pass in a more complex custom comparer.
React.memo?It only checks props, not context changes or state changes from inside. React.memo is also useless, if the memoized component has non-primitive children. useMemo can complement memo here, like:
// inside React.memo component
const ctxVal = useContext(MyContext); // context change normally trigger re-render
return useMemo(() => <Child />, [customDep]) // prevent re-render of children