no-missing-component-display-name

Full Name in eslint-plugin-react-x

react-x/no-missing-component-display-name

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-missing-component-display-name

Description

Enforces that all components have a displayName which can be used in devtools.

When defining a React component, if you specify its component name in a way that React can't infer its displayName, it will show up as an anonymous component in devtools, which makes debugging more difficult.

Examples

Failing

import React from "react";

const Button = React.memo(() => <div />);
//                        ^^^^^^^^^^^^^
//                        - Add missing 'displayName' for component.

import React from "react";

const Button = React.forwardRef(() => <div />);
//                              ^^^^^^^^^^^^^
//                              - Add missing 'displayName' for component.

(Not supported yet)

import React from "react";

export default () => <div />;
//             ^^^^^^^^^^^^^
//             - Add missing 'displayName' for component.

Passing

import React from "react";

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

import React from "react";

const Button = React.memo(() => <div />);
Button.displayName = "Button";

import React from "react";

const Button = React.forwardRef(function Button() {
  return <div />;
});

import React from "react";

const Button = React.forwardRef(() => <div />);
Button.displayName = "Button";

import React from "react";

export default function Button() {
  return <div />;
}

no-missing-component-display-name

Description

Examples

Failing

Passing

Implementation

See Also

On this page