[Bug]: react/display-name not work for wrapped components

tylerlong commented 4 weeks ago

Is there an existing issue for this?

[x] I have searched the existing issues and my issue is unique
[x] My issue appears in the command-line and not only in the text editor

Description Overview

react/display-name doesn't work if I put my component into a wrapper. Even the wrapper does nothing but delegate to React.memo

No error, it just doesn't trigger the issue

Both editor and yarn eslint .

Expected Behavior

It should report lint issue when a component is wrapped.

eslint-plugin-react version

7.37.2

eslint version

v9.14.0

node version

v20.18.0

Code to reproduce

import { memo } from 'react';

// works
export const A = memo(() => {
  return '';
});

// does not work
const memo2 = (c) => memo(c);
export const A2 = memo2(() => {
  return '';
});

ljharb commented 4 weeks ago

components shouldn't be arrow functions, and i'm not sure why you'd expect the arbitrary nesting in memo2 to be something a linter could cover?

tylerlong commented 4 weeks ago

Feel free to close it.

components shouldn't be arrow functions

Arrow function is fine for React Components, especially for small stateless components. Some people prefers not to use arrow functions but that's personal preferences. React official documentation doesn't deprecate it.

why you'd expect the arbitrary nesting in memo2 to be something a linter could cover?

I was unaware that it's beyond a linter's ability. I thought linter should be more powerful than a pure formatter, such as prettier.

ljharb commented 2 weeks ago

Linters are much more powerful than a pure formatter, but that doesn't mean they can arbitrarily know what things are at runtime, unfortunately.

jsx-eslint / eslint-plugin-react