react/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
❌ Incorrect
const Button = React.memo(() => <div />);const Button = React.forwardRef(() => <div />);(Not supported yet)
export default () => <div />;✅ Correct
const Button = React.memo(function Button() {
return <div />;
});const Button = React.memo(() => <div />);
Button.displayName = "Button";const Button = React.forwardRef(function Button() {
return <div />;
});const Button = React.forwardRef(() => <div />);
Button.displayName = "Button";export default function Button() {
return <div />;
}