no-missing-component-display-name

Rule category

Debug.

What it does

Enforces that all components have a displayName or name which React can use as its displayName in devtools.

Why is this bad?

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-leaked-conditional-rendering no-missing-key