DEV Community

Cover image for The big secret of React
Axel Navarro for Cloud(x);

Posted on

The big secret of React

Have you thought about how React compares the deps array used by the hooks in every render? Let's check the magic that decides when to run the useEffect hook.


As a curious developer, I was wondering how React checks the dependencies array -called deps- that is passed to the useEffect, useCallback and useMemo hooks. I didn't find the answer anywhere.

useEffect(() => {
  console.log('someValue has changed:', someValue);
}, [someValue]);
Enter fullscreen mode Exit fullscreen mode

So, my only option was to check the React's code itself to find the magic, and I found more than I expected.

The comparison

React doesn't use == or === operators, it uses the method. This method provides the SameValue algorithm since ES2015.

We all know the difference between Abstract Equality Comparison (==) and Strict Equality Comparison (===), but what comes with this new comparison?

💡 You can quickly check the differences between these equality algorithms in MDN.

We can affirm that the differences between === and are:

  1. +0, -0 and 0 result in the same value for ===, but different for «And that's a point to is for being mathematically correct.» ✅
  2. NaN === NaN is false for === 😒, but true for the SameValue algorithm. «Another point to

I think now it's clearer why React choses a little-known comparison method.

Show me the code

If you're a developer, I guess you want to see where is the code for 😁. The answer is in a function called areHookInputsEqual in the file:

💡 I used the latest tag because the code changes continuously.

It's cool to see how this check is completely ignored if you're in a hot reload process, and how the checks for the programmer are removed in the production build of React.


IMO the most important issue here is that React doesn't make a deep comparison between objects, it only checks if they're the same object.

💡 If you don't know what this means check this Redux page about the benefits of immutability.

🧠 Remember that an object variable is just a memory reference (pointer) to where the object is, that's what === and use when you compare two objects.

I hope you enjoyed this dive into the React's source code. 🤿

Top comments (2)

geforcesong profile image
George Guo

great article

navarroaxel profile image
Axel Navarro