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 triggered on default export using React.memo #2324

Closed
mysport12 opened this issue Jun 24, 2019 · 7 comments · Fixed by #2399
Closed

display-name triggered on default export using React.memo #2324

mysport12 opened this issue Jun 24, 2019 · 7 comments · Fixed by #2399

Comments

@mysport12
Copy link

This issue was originally reported by @jwalton in #2133. Confirmed that issue exists in 7.13.0 and 7.14.1 (we are not using typescript in our project).

simple solution there, use a default export :-D

In latest build, this appears to be broken for a default export (although... I'm in a typescript project, so this might be a problem specific to linting .tsx files):

export default React.memo(function LabelControl(props: ControlProps) {
    const control = props.control as OnDemandLabelControl;

    return (
        <ControlWrapper>
            <Translate tagName="h2" message={control.title} />
        </ControlWrapper>
    );
});

triggers react/display-name, but:

function LabelControl(props: ControlProps) {
    const control = props.control as OnDemandLabelControl;

    return (
        <ControlWrapper>
            <Translate tagName="h2" message={control.title} />
        </ControlWrapper>
    );
}

export default React.memo(LabelControl);

does not.

Originally posted by @jwalton in #2133 (comment)

@yannickcr yannickcr added the bug label Jun 24, 2019
@jwalton
Copy link

jwalton commented Jun 25, 2019

Thanks for confirming this was in vanilla js. :)

@TrevorSayre
Copy link

Yep, I am getting the same error with something as simple as:

export const Foo = React.memo(
    function Foo() {
        return <div>:(</div>;
    }
);

However, in the React dev tools, the component has the display name Foo just fine. If I use an arrow function instead, then there is no display name (just shows as Component) and the error would be correct.

@MrJohz
Copy link

MrJohz commented Sep 2, 2019

I'm also getting this error with the forwardRef function (e.g. as in #2269, but without the same issues with propTypes). I'm getting this when using named exports (e.g. export const Foo = forwardRef(...)) and with default exports (e.g. export default forwardRef(...)).

In all of these cases, as best I can see, the forwardRef and memo functions use the name of the wrapped component (or component-like). Certainly, when I look in React DevTools, I can see the correct component name in all of these cases.

@labs-dlugo
Copy link

Still get the same issue as @TrevorSayre

@ljharb
Copy link
Member

ljharb commented Nov 29, 2019

Please update to v7.17, released yesterday, and file a new issue if you’re still having trouble.

stefan-wullems pushed a commit to stefan-wullems/eslint-plugin-react that referenced this issue Nov 30, 2019
Wrapping a named function declaration with a React.memo or
React.forwardRef will no longer throw an false positive error

Fixes jsx-eslint#2324. Fixes jsx-eslint#2269.
@SmirnovW
Copy link

Hi There,

I'm getting the same problem, the version is 7.18.0

@ljharb
Copy link
Member

ljharb commented Jan 27, 2020

@SmirnovW please file a new issue

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

Successfully merging a pull request may close this issue.

8 participants