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 const Button: React.MemoExoticComponent<() => React.JSX.Element>Button = React.function React.memo<() => React.JSX.Element>(Component: () => React.JSX.Element, propsAreEqual?: ((prevProps: Readonly<unknown>, nextProps: Readonly<unknown>) => boolean) | undefined): React.MemoExoticComponent<...> (+1 overload)Lets you skip re-rendering a component when its props are unchanged.
@see{@link https://react.dev/reference/react/memo React Docs}@paramComponent The component to memoize.@parampropsAreEqual A function that will be used to determine if the props have changed.@example```tsx
import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
  // ...
});
```memo(() => <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />);
//                        - Missing 'displayName' for component.

import React from "react";
 
const const Button: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Button = React.function React.forwardRef<unknown, {}>(render: React.ForwardRefRenderFunction<unknown, {}>): React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Lets your component expose a DOM node to a parent component
using a ref.
@see{@link https://react.dev/reference/react/forwardRef React Docs}@see{@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}@paramrender See the {@link ForwardRefRenderFunction}.@templateT The type of the DOM node.@templateP The props the component accepts, if any.@example```tsx
interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));
```forwardRef(() => <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />);
//                              - Missing 'displayName' for component.

(Not supported yet)

import React from "react";
 
export default () => <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />;
//             - Missing 'displayName' for component.

Passing

import React from "react";
 
const const Button: React.NamedExoticComponent<object>Button = React.function React.memo<object>(Component: React.FunctionComponent<object>, propsAreEqual?: ((prevProps: object, nextProps: object) => boolean) | undefined): React.NamedExoticComponent<object> (+1 overload)Lets you skip re-rendering a component when its props are unchanged.
@see{@link https://react.dev/reference/react/memo React Docs}@paramComponent The component to memoize.@parampropsAreEqual A function that will be used to determine if the props have changed.@example```tsx
import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
  // ...
});
```memo(function function (local function) Button(): React.JSX.ElementButton() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />;
});

import React from "react";
 
const const Button: React.MemoExoticComponent<() => React.JSX.Element>Button = React.function React.memo<() => React.JSX.Element>(Component: () => React.JSX.Element, propsAreEqual?: ((prevProps: Readonly<unknown>, nextProps: Readonly<unknown>) => boolean) | undefined): React.MemoExoticComponent<...> (+1 overload)Lets you skip re-rendering a component when its props are unchanged.
@see{@link https://react.dev/reference/react/memo React Docs}@paramComponent The component to memoize.@parampropsAreEqual A function that will be used to determine if the props have changed.@example```tsx
import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
  // ...
});
```memo(() => <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />);
const Button: React.MemoExoticComponent<() => React.JSX.Element>Button.React.NamedExoticComponent<unknown>.displayName?: string | undefinedUsed in debugging messages. You might want to set it
explicitly if you want to display a different name for
debugging purposes.
@see{@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}displayName = "Button";

import React from "react";
 
const const Button: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Button = React.function React.forwardRef<unknown, {}>(render: React.ForwardRefRenderFunction<unknown, {}>): React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Lets your component expose a DOM node to a parent component
using a ref.
@see{@link https://react.dev/reference/react/forwardRef React Docs}@see{@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}@paramrender See the {@link ForwardRefRenderFunction}.@templateT The type of the DOM node.@templateP The props the component accepts, if any.@example```tsx
interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));
```forwardRef(function function (local function) Button(): React.JSX.ElementButton() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />;
});

import React from "react";
 
const const Button: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Button = React.function React.forwardRef<unknown, {}>(render: React.ForwardRefRenderFunction<unknown, {}>): React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Lets your component expose a DOM node to a parent component
using a ref.
@see{@link https://react.dev/reference/react/forwardRef React Docs}@see{@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}@paramrender See the {@link ForwardRefRenderFunction}.@templateT The type of the DOM node.@templateP The props the component accepts, if any.@example```tsx
interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));
```forwardRef(() => <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />);
const Button: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Button.React.NamedExoticComponent<React.RefAttributes<unknown>>.displayName?: string | undefinedUsed in debugging messages. You might want to set it
explicitly if you want to display a different name for
debugging purposes.
@see{@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}displayName = "Button";

import React from "react";
 
export default function function Button(): React.JSX.ElementButton() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div />;
}

no-leaked-conditional-rendering no-missing-key