Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
fefrei opened this issue Mar 24, 2021 · 6 comments · Fixed by #3321
Closed

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

fefrei opened this issue Mar 24, 2021 · 6 comments · Fixed by #3321

Comments

@fefrei
Copy link

fefrei commented Mar 24, 2021

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
Copy link
Member

ljharb commented Mar 24, 2021

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

@fefrei
Copy link
Author

fefrei commented Mar 24, 2021

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

@ljharb
Copy link
Member

ljharb commented Mar 24, 2021

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.

ljharb added a commit to ljharb/eslint-plugin-react that referenced this issue Feb 23, 2022
@TildaDares
Copy link
Contributor

I'd like to work on this!

@TildaDares
Copy link
Contributor

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
Copy link
Member

ljharb commented Jul 5, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants