Shallow Compare
Note:
shallowCompare
is a legacy add-on. UseReact.memo
orReact.PureComponent
instead.
Importing
Overview
Before React.PureComponent
was introduced, shallowCompare
was commonly used to achieve the same functionality as PureRenderMixin
while using ES6 classes with React.
If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases.
Example:
shallowCompare
performs a shallow equality check on the current props
and nextProps
objects as well as the current state
and nextState
objects.
It does this by iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal.
shallowCompare
returns true
if the shallow comparison for props or state fails and therefore the component should update.
shallowCompare
returns false
if the shallow comparison for props and state both pass and therefore the component does not need to update.
Last updated