display-name has false positive on nested use of memo and forwardRef

[fefrei]

Since #2399, eslint-plugin-react knows not to complain about code like this:

export const ComponentWithMemo = React.memo(function Component({ world }) {
 return <div>Hello {world}</div>
})

export const ComponentWithForwardRef = React.forwardRef(function Component({ world }) {
  return <div>Hello {world}</div>
})

In that pull request, nested use of memo and forwardRef like so...

export const ComponentWithForwardRef = React.memo(React.forwardRef(function Component({ world }) {
  return <div>Hello {world}</div>
}))

...was intentionally treated as a display-name violation due to a React bug causing such components to be anonymous. This issue was solved in November 2019, so the display-name should now accept this.

[ljharb]

In which React versions is that fixed in React? We should only consider that satisfactory in those versions.

[fefrei]

I'm unsure, but judging by the date, it should have gone in somewhere in the React 16 cycle.

[ljharb]

Clicking on the commit that merged the PR implies it's actually gone out in v0.14.10, v15.7.0, and v16.12.0+ - so that's the range we should be using.

[TildaDares]

I'd like to work on this!

[TildaDares]

If I understand correctly, the display-name rule should only accept the use of nested useMemo and forwardRef in the React versions above. If that's correct then how do I specify that in the code?

[ljharb]

React.memo takes a component, so a function passed to it absolutely should be required to have a displayName, since it won't implicitly infer a name from anywhere.

React.forwardRef does not take a component, so this shouldn't complain.

However, the specific nested case should complain - unless React is one of the versions mentioned here, in which case it should not complain.

To handle that in the code, the report call should only be made if the react version fetched from settings is high enough.