display-name

display-name rule

Enforce component display names for better debugging experience. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages.

Quick Summary

Aspect	Details
Severity	Warning (development)
Auto-Fix	❌ No (requires manual naming)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React projects, debugging with React DevTools

Rule Details

Why This Matters

Issue	Impact	Solution
🔍 React DevTools	Anonymous components show as `<Unknown>`	Add displayName
🐛 Error Stack Traces	Hard to identify component	Named components
📊 Performance Tools	Can't identify slow components	Clear naming
🧪 Testing	Selectors may fail	Consistent names

Examples

❌ Incorrect

// Anonymous arrow function
const MyComponent = () => {
  return <div>Hello</div>;
};

// Anonymous function expression
const AnotherComponent = function() {
  return <div>World</div>;
};

// Class without displayName
class UserCard extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

// HOC without displayName
const withAuth = (WrappedComponent) => {
  return (props) => <WrappedComponent {...props} />;  // ❌ No name
};

✅ Correct

MyComponent

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/display-name': 'warn'
  }
}

Strict Mode

{
  rules: {
    'react-features/display-name': 'error'
  }
}

Common Patterns

Higher-Order Components

function withLogger(WrappedComponent) {
  const WithLogger = (props) => {
    console.log('Rendering:', WrappedComponent.displayName);
    return <WrappedComponent {...props} />;
  };
  
  // Set displayName for debugging
  WithLogger.displayName = `withLogger(${
    WrappedComponent.displayName || 
    WrappedComponent.name || 
    'Component'
  })`;
  
  return WithLogger;
}

React.forwardRef

const TextInput = React.forwardRef<HTMLInputElement, InputProps>(
  (props, ref) => <input ref={ref} {...props} />
);
TextInput.displayName = 'TextInput';

React.memo

const ExpensiveList = React.memo(({ items }) => {
  return items.map(item => <Item key={item.id} {...item} />);
});
ExpensiveList.displayName = 'ExpensiveList';

Context Components

const ThemeContext = React.createContext(defaultTheme);

const ThemeProvider = ({ children, theme }) => {
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};
ThemeProvider.displayName = 'ThemeProvider';

When Not To Use

Scenario	Recommendation
🚀 Production builds	displayName is stripped in prod anyway
🧪 Test utilities	May not need debugging names
📦 Tiny components	Named exports may be sufficient

Comparison with Alternatives

Feature	display-name	eslint-plugin-react	React DevTools
Class components	✅ Yes	✅ Yes	✅ Shows name
Function components	✅ Yes	✅ Yes	⚠️ May be Anonymous
HOCs	✅ Enforces naming	⚠️ Limited	❌ Shows wrapper
LLM-Optimized	✅ Yes	❌ No	❌ No
ESLint MCP	✅ Optimized	❌ No	❌ No

jsx-key - Enforce keys in lists
react-class-to-hooks - Migrate to hooks

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.

Not a finding

React reads a component's display name off Function.name or Class.name. A component with a name is already named — there is nothing to fix and nothing to report.

Code	Why it is silent
`function Profile() { ... }`	Named by the function.
`const Profile = () => ...`	Named by the binding.
`class Profile extends Component { ... }`	Named by the class; `static displayName` is optional.
`const Row = memo(() => <div />)`	The binding names the component through the wrapper.

If it fires, React genuinely cannot name it: an anonymous export default, an anonymous class component, or memo/forwardRef with no binding to take a name from. Those render as Anonymous in DevTools and in every component stack trace.

Did this rule catch something? Star the repo to get new CWE coverage as we ship it — or follow the AI-code-security benchmarks behind these rules.

Follow the benchmarks Star on GitHub