react/display-name Pedantic

What it does

Enforces that React components have a displayName property.

Why is this bad?

React DevTools uses displayName to show component names in the component tree. Without displayName, components will show up as "Unknown" in DevTools.

Examples

Examples of incorrect code for this rule:

jsx

const MyComponent = () => <div>Hello</div>;

Examples of correct code for this rule:

jsx

const MyComponent = () => <div>Hello</div>;
MyComponent.displayName = "MyComponent";

Configuration

This rule accepts a configuration object with the following properties:

checkContextObjects

type: boolean

default: false

When true, this rule will warn on context objects without a displayName.

displayName allows you to name your context object. This name is used in the React DevTools for the context's Provider and Consumer.

ignoreTranspilerName

type: boolean

default: false

When true, the rule will ignore the name set by the transpiler and require a displayName property in this case.

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

{
  "plugins": ["react"],
  "rules": {
    "react/display-name": "error"
  }
}

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/display-name": "error",
  },
});

bash

oxlint --deny react/display-name --react-plugin

Version

This rule was added in v1.42.0.

What it does ​

Why is this bad? ​

Examples ​

Configuration ​

checkContextObjects ​

ignoreTranspilerName ​

How to use ​

Version ​

References ​