Rules
no-missing-component-display-name

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<() => React.JSX.Element> (+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.PropsWithoutRef<{}> & 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<() => React.JSX.Element> (+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 | undefined
Used 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.PropsWithoutRef<{}> & 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.PropsWithoutRef<{}> & 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 | undefined
Used 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 />;
}