Eslint-plugin-react: v7.20.6 has breaking changes for react/display-name

[k-yle]

before v7.20.6 the react/display-name rule was okay with this pattern:

const renderer = a => listItem => (
    <div>{a} {listItem}</div>
);

// for context, that function might be used like this:
<List list={[1, 2, 3]} renderItem={renderer(a)} />

Since v7.20.6 the react/display-name rule reports that "Component definition is missing display name" on line 1.

There's nothing in the changelog for v7.20.6 regarding the react/display-name rule so I suspect this is unintentional?

I'm also confused as to how we'd fix this because renderer is not a component, nor is the function it returns. So maybe this is a false positive?

[ljharb]

renderer is not one, but the function it returns is. What likely changed here is #2708 which affected component detection (cc @jzabala).

This should fix the warning, and also improve debuggability of your components:

const renderer = a => function SomeComponentName(listItem) {
    return <div>{a} {listItem}</div>;
};

[jzabala]

As noted by @ljharb the change is intentional and was introduced to fix an inconsistency that was in the library (you can read the whole discussion here: https://github.com/yannickcr/eslint-plugin-react/pull/2708#discussion_r461792913).

Taking your own example:

Before the change this was a component:

const renderer = a => {
  return listItem => ( // <-- component
    <div>{a} {listItem}</div>
  )
};

But this wan't:

const renderer = a => listItem => ( <-- not a component
    <div>{a} {listItem}</div>
);

If you check carefully the code is basically the same.

As also noted in the previous comment just setting any name to the last function solves the problem or you could disable the rule in that specific case:

// eslint-disable-next-line react/display-name
const renderer = a => listItem => (
    <div>{a} {listItem}</div>
);

[stephyswe]

There is so much issue with displayName.

1. It ask to turn on react/display-name in file. But when added it says rule don't exist.
   /* eslint-disable react/display-name: */ =
   Definition for rule 'react/display-name:' was not found.eslint(react/display-name:)

2. It completely destroy development. As running app with this issue result in Failed to Compile Error.
   ./src/msw/utils/avatar.js
   Line 1:1: Definition for rule 'react/display-name:' was not found react/display-name:

3. There is no quick way to reach documentation for displayName in IDE - no link

4. The documentation for displayName* has no solution to ignore displayName either in file or in eslint config.

5. = https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/display-name.md

6. The ONLY solution I found now is adding these two lines to a file in a Component. There is no fix outside Component to my knowledge.
   Component fix =
   /* eslint no-duplicate-imports: ["error", { includeExports: true }] /
   / react/display-name: ["error", { includeExports: true }] */

Inside function that isn't component - No fix found.

Currently
I'm gonna try to install an older version of eslint-plugin-react and see if that helps.

[ljharb]

@stephyswe

1. if the rule isn't found, then you need eslint-plugin-react installed and "react" in your config's "plugins" array.
2. Separately, your build step shouldn't be gated on the linter; linter failures should never prevent compilation.
3. like every rule, it comes with a URL to the docs in its metadata; that's up to your IDE to display
4. like every eslint rule, you can use inline override comments to tell eslint to ignore the violation