Skip to Content

How React Compares Dependencies

Q: How does React compare dependencies for useEffect, useMemo, and other Hooks?

A: It uses, which differs distinctly in behavior from both == and ===. I went searching in the React codebase and here is where is referenced (with a polyfill): shared/objectIs.js

 * inlined polyfill to avoid requiring consumers ship their own
function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare

const objectIs: (x: any, y: any) => boolean =
  typeof === "function" ? : is;

export default objectIs;

and where the comparison logic for dependencies lies : react-reconciler/src/

for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
  if (is(nextDeps[i], prevDeps[i])) {
  return false;
return true; compares references, so adding a function declared inside the body of a React component as a dependency to useEffect will cause this effect to be re-run every time regardless of whether props/state referenced by the function have changed. To avoid this, you could call useCallback to memoize the function, although you should only do this if other options are not possible.

comments powered by Disqus