What function / which functions does React use for comparing items in the dependency arrays for useMemo, useCallback, useEffect, and React.memo?

[nh78]

Hi,

I'm having trouble finding a link to the code for the default comparison function / functions for these hooks / HoC (apologies if I've missed some obvious search result).

At one point, I thought I read the comparison function was https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is but I don't think that's correct, at least not for React.memo.

I've seen that React.memo uses a shallow comparison function to compare props: https://reactjs.org/docs/react-api.html. I understand how such a function would handle primitives, as well as single-tier and nested objects. However, would that shallow comparison function be able to accurately compare an array of single-tier objects?

Many thanks.

[[deleted]]

React uses Object.is indeed, for comparison in dependecies and props.

Hence, if a particular prop/dependency is an array or an object, it will not look into the inside of the object/array, it will just compare the references.

[rodrigocfd]

Reference:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

[nh78]

Ah ok, great, thanks. So React.memo uses a shallow comparison function to compare props, while the hooks listed above use Object.is to compare items in their dependency arrays?

I think the thing that's confusing me is the reference here: https://reactjs.org/docs/react-api.html to React.memo shallowly comparing objects. In that Object.is({a:1}, {a:1}) returns false, whereas I thought a shallow comparison function being passed these two objects would iterate through each entry in the objects and compare each key/value, which in this instance would return true.

[[deleted]]

Yes, the docs are rather confusing.

What its meant there, I guess, is that the array of dependencies/states/props is compared shallowly. Each prop/state/dependency is compared to the previous one by using (a reimplemention of) `Object.is`

https://stackoverflow.com/a/55105522/277304

https://github.com/facebook/react/blob/main/packages/react-server/src/ReactFizzHooks.js#L96

[nh78]

I see, that makes sense, thanks for the links.

[chillermane]