react/display-name

React DevTools, warnings, and component stacks show a component by its name. A component without one shows up as Anonymous or Unknown, so you can't tell which one failed.

React takes the name from the function or class, or from the variable it's assigned to. So the rule mostly reports anonymous functions that are exported directly or passed to memo or forwardRef. A displayName property also counts.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/display-name" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/display-name" = ["error", {
  ignoreTranspilerName = false,
  checkContextObjects = false,
}]

Examples#

example.jsx1 problem

export default () => <nav>Menu</nav>;

example.jsx1 problem

import { forwardRef } from "react";

export const TextField = forwardRef((props, ref) => <input ref={ref} {...props} />);

example.jsxNo problems

export default function Menu() {
  return <nav>Menu</nav>;
}

example.jsxNo problems

import { forwardRef } from "react";

export const TextField = forwardRef(function TextField(props, ref) {
  return <input ref={ref} {...props} />;
});

export const Search = forwardRef((props, ref) => <input type="search" ref={ref} {...props} />);
Search.displayName = "Search";

Options#

Option	Default	What it does
`ignoreTranspilerName`	`false`	Don't count the name of the function, class, or variable. Only an explicit `displayName` counts.
`checkContextObjects`	`false`	Also require a `displayName` on the result of `createContext()`.

example.jsxwith { "ignoreTranspilerName": true }1 problem

export default function Menu() {
  return <nav>Menu</nav>;
}

example.jsxwith { "ignoreTranspilerName": true }No problems

export default function Menu() {
  return <nav>Menu</nav>;
}
Menu.displayName = "Menu";

example.jsxwith { "checkContextObjects": true }1 problem

import { createContext } from "react";

const ThemeContext = createContext("light");

example.jsxwith { "checkContextObjects": true }No problems

import { createContext } from "react";

const ThemeContext = createContext("light");
ThemeContext.displayName = "ThemeContext";