Bug: use lodash.isEqual to compare react elemet can cause infinite loop

[migodev42]

React version: v16.13.1

Steps To Reproduce

1.Use lodash.isEqual to compare two object, some of their key`s value are react element
2.Causing inifite loop in dev

Howerver when I use fast-deep-equal React-specific isEqual, it won`t cause this infinite loop.

Since I find out React would add a _owner property on dev, is my problem related to this?

Link to code example:

The current behavior

The expected behavior

[hosseinmd]

I don't think you should use isEqual for components which have children props.

In a some situation the children components are not memo components, but if wrapped with a component that uses fast-deep-equal that forces it to be a memo component. This way causes them to be memo too. Because memorization going to deep of children too.

[eps1lon]

Cyclic references in JS objects are valid. Your "is equal" implementation should guard against it. This is a problem with lodash's isEqual and not a bug in React. Seems like fast-deep-equal has a fix for that issue. Either use fast-deep-equal or find another workaround for this issue. You can find helpful resources on https://reactjs.org/community/support.html

[gaearon]

I should note it is a really, really bad idea to pass a React element to isEqual. You’re going to spend a lot of unnecessary time traversing React internals even if you had a protection.

Ideally you should compare elements as shallowly as possible, and instead memoize them where they get created (if needed for perf). As the last resort you may compare element fields except for the ones starting with underscore. But again, this is usually a very bad idea because you’re going to have completely unpredictable performance.

[eps1lon]

Might be worth adding a warning to the docs for custom arePropsEqual implementations (under https://reactjs.org/docs/react-api.html#reactmemo). People might naively reach for some deep equal implementation when trying to memoize props with shallow objects. That works™ until you pass a React element which should be somewhat common.

[danielabyan]

React components have very heavy keys. When comparing properties, it doesn't make sense to compare these keys because they don't contain application state data. In addition, there is a danger of falling into the circular references trap, which will lead to an endless cycle of validating the properties of the React component. For this reason, these properties are best ignored. This trick is used in the epoberezkin/fast-deep-equal library.

const isPropsEqual = _.isEqualWith(
      data1,
      data2,
      (data1Value, data2Value, key) => {
        const ignoreKeysList = [
          '_owner',
          '$$typeof'
        ]
        return ignoreKeysList.includes(key) ? true : undefined
      }
    )