In this documentation of React, it is said that
shallowCompare performs a shallow equality check on the current props and nextProps objects as well as the current state and nextState objects.
The thing which I am unable to understand is If It shallowly compares the objects then shouldComponentUpdate method will always return true, as
We should not mutate the states.
and if we are not mutating the states then the comparison will always return false and so the shouldComponent update will always return true. I am confused about how it is working and how will we override this to boost the performance.
Shallow compare does check for equality. When comparing scalar values (numbers, strings) it compares their values. When comparing objects, it does not compare their attributes – only their references are compared (e.g. "do they point to same object?").
Let’s consider the following shape of
user
objectExample 1:
Notice you changed users name. Even with this change, the objects are equal. The references are exactly the same.
Example 2:
Now, without any changes to object properties they are completely different. By cloning the original object, you create a new copy with a different reference.
Clone function might look like this (ES6 syntax)
Shallow compare is an efficient way to detect changes. It expects you don’t mutate data.
shallow comparison is when the properties of the objects being compared is done using “===” or strict equality and will not conduct comparisons deeper into the properties. for e.g.
Although both the objects appear to be same,
game_item.teams
is not the same reference asupdated_game_item.teams
. For 2 objects to be same, they should point to the same object.Thus this results in the state being evaluated to be updated
This time every one of the properties return true for the strict comparison as the teams property in the new and old object point to the same object.
The
updated_game_item3.first_world_cup
property fails the strict evaluation as 1930 is a number whilegame_item.first_world_cup
is a string. Had the comparison been loose (==) this would have passed. Nonetheless this will also result in state update.Additional Notes:
There is also legacy explanation of shallow compare in React:
UPD: Current documentation says about shallow compare:
UPD2: I think Reconciliation is also important theme for shallow compare understanding.
The shallow equal snippet by @supi above (https://stackoverflow.com/a/51343585/800608) fails if
prevObj
has a key thatnewObj
doesn’t have. Here is an implementation that should take that into account:Note that the above doesn’t work in Explorer without polyfills.
There is an implementation with examples.
The accepted answer can be a bit misleading for some people.
This statement in particular "Notice you changed users name. Even with this change objects are equal. They references are exactly same."
When you do the following with objects in javascript:
Mutating any of the two variables will change both of them because they have the same reference. That’s why they will always be equal (
==, ===, Object.is()
) to each other.Now for React, the following is the shallow comparison function:
https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js
For non-primitives (Objects), it checks:
Object.is()
) to the second.Object.is()
) to that of the second. This is done for the first level of keys. If the object has a key whose value is another object, this function does not check for equality further down the depth of the object.finasteride and alcohol – http://finasteridepls.com/ nebenwirkungen propecia