no-missing-component-display-name

react-x/no-missing-component-display-name

@eslint-react/no-missing-component-display-name

// Problem: React cannot infer displayName from an anonymous arrow function; it will show as anonymous in DevTools
import React from "react";

const Button = React.memo(() => <div />);
//                        ^^^ Add missing 'displayName' for component.

// Recommended: Use a named function or manually add displayName after assignment
import React from "react";

const Button = React.memo(function Button() {
  return <div />;
});

import React from "react";

const Button = React.memo(() => <div />);
Button.displayName = "Button";

// Problem: When forwardRef wraps an anonymous function, React cannot automatically infer the component name
import React from "react";

const Button = React.forwardRef(() => <div />);
//                              ^^^ Add missing 'displayName' for component.

// Recommended: Use a named function or manually set the displayName property
import React from "react";

const Button = React.forwardRef(function Button() {
  return <div />;
});

import React from "react";

const Button = React.forwardRef(() => <div />);
Button.displayName = "Button";

// Problem: When default-exporting an anonymous function, the component has no recognizable name in DevTools
import React from "react";

export default () => <div />;
//             ^^^ Add missing 'displayName' for component.

// Recommended: Change the default export to a named function declaration
import React from "react";

export default function Button() {
  return <div />;
}