Why ReactJS using Object.is() for comparison is better than using `===`
Kenneth Lum
Posted on February 23, 2020
ReactJS uses Object.is()
to compare the hooks' dependency array, instead of using ===
. It actually is a better choice. First of all, this post stated how Object.is()
is different from ===
.
Why is it better? It is because:
-
If we did something for the dependency array
[1, 2, NaN]
, and the next time, it is[1, 2, NaN]
again, then===
would have indicated them different, becauseNaN !== NaN
in JavaScript. (it is the only value that is not===
to itself in JavaScript). Example:https://stackblitz.com/edit/react-yxngvv?file=index.js
[1, 2, NaN]
is considered to be the same the next time
useEffect()
oruseMemo()
sees it. They are both called twice only in the example: the first time, and when the array changed from[1, 2, NaN]
to[1, 3, NaN]
. On the other hand, for the dependency array
[1, 2, 0]
, if the next time, the dependency array is[1, 2, -0]
, ReactJS would actually consider them to be different, due toObject.is()
indicating0
and-0
are different. In a website built by NASA, or even by college students,0
and-0
actually may give different results for computations.
Example:
https://stackblitz.com/edit/react-djex2r?file=index.js
The console log shows that the function inside of useEffect() and useMemo() are called every time. You can also actually see the output of the component showing a result alternating between Infinity
and -Infinity
. ReactJS is actually on a "safer side", in which ReactJS will do something again, when 0
becomes -0
, because the results could be different, and it won't be desirable when the screen should display -Infinity
but it keeps the Infinity
unchanged on screen.
Posted on February 23, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 28, 2024
November 27, 2024