How to fix Multiple components with the same displayName in React

What this error means

The displayName property in React is a string used primarily for debugging purposes. React DevTools and other debugging tools use displayName to identify components in the component tree. When multiple components share the same displayName, it becomes challenging to differentiate between them during debugging sessions. This issue commonly arises when using higher-order components (HOCs), React.memo, React.forwardRef, or when creating components dynamically. Unlike a runtime error, duplicate displayNames don't break your application but significantly hamper the debugging experience by making it unclear which component instance you're inspecting in DevTools. The React DevTools component tree relies on displayName to present a readable component hierarchy. When displayNames collide, you may see multiple instances labeled identically, making it impossible to determine which component corresponds to which part of your UI without additional investigation.

Typical symptoms

• Multiple components showing identical names in React DevTools component tree
• Difficulty identifying specific component instances during debugging
• Confusion when inspecting component props or state in DevTools
• ESLint warnings about missing or duplicate displayName properties
• Anonymous components appearing as "<Unknown>" or "<Component>" in error stack traces
• Styled-components or HOCs showing generic wrapper names instead of meaningful identifiers

Common causes

1. Using React.memo without setting a unique displayName on the wrapped component
2. Higher-order components (HOCs) that wrap multiple components without generating unique displayNames
3. React.forwardRef components lacking explicit displayName assignments
4. Creating components dynamically in loops or maps without unique naming
5. Exporting anonymous function components without assigned names or displayName properties
6. Using styled-components or other CSS-in-JS libraries without configuring displayName generation
7. Context.Provider and Context.Consumer components sharing the default displayName
8. Multiple versions of the same component loaded in development bundles

How to fix "Multiple components with the same displayName"

# Install ESLint plugin if not already present
npm install --save-dev eslint-plugin-react

{
  "rules": {
    "react/display-name": ["warn", {
      "ignoreTranspilerName": false
    }]
  }
}

const UserProfile = ({ user }) => {
  return <div>{user.name}</div>;
};

// Add explicit displayName
UserProfile.displayName = 'UserProfile';

export default UserProfile;

// Bad: Anonymous component
export default ({ user }) => <div>{user.name}</div>;

// Good: Named with displayName
const UserProfile = ({ user }) => <div>{user.name}</div>;
UserProfile.displayName = 'UserProfile';
export default UserProfile;

const ExpensiveComponent = ({ data }) => {
  // Component logic
  return <div>{data}</div>;
};

const MemoizedComponent = React.memo(ExpensiveComponent);

// Set displayName on the memoized version
MemoizedComponent.displayName = 'MemoizedExpensiveComponent';

export default MemoizedComponent;

const MemoizedComponent = React.memo(
  ({ data }) => <div>{data}</div>
);
MemoizedComponent.displayName = 'ExpensiveComponent';

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="fancy-button">
    {props.children}
  </button>
));

// Set displayName for debugging
FancyButton.displayName = 'FancyButton';

export default FancyButton;

const FancyInput = React.memo(
  React.forwardRef((props, ref) => (
    <input ref={ref} {...props} />
  ))
);

FancyInput.displayName = 'FancyInput';

function withAuth(WrappedComponent) {
  const WithAuth = (props) => {
    // HOC logic
    return <WrappedComponent {...props} />;
  };

  // Generate unique displayName
  const wrappedName = WrappedComponent.displayName
    || WrappedComponent.name
    || 'Component';

  WithAuth.displayName = `withAuth(${wrappedName})`;

  return WithAuth;
}

// Usage
const UserDashboard = ({ user }) => <div>{user.name}</div>;
UserDashboard.displayName = 'UserDashboard';

export default withAuth(UserDashboard);
// DevTools will show: withAuth(UserDashboard)

import { createContext } from 'react';

const ThemeContext = createContext();

// Set displayName for debugging
ThemeContext.displayName = 'ThemeContext';

// Now Provider and Consumer will show as:
// ThemeContext.Provider and ThemeContext.Consumer
export default ThemeContext;

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

ThemeProvider.displayName = 'ThemeProvider';

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": true,
        "fileName": true
      }
    ]
  ]
}

module.exports = {
  compiler: {
    styledComponents: {
      displayName: true,
      fileName: true
    }
  }
};

Advanced notes

const MyComponent: React.FC & { displayName?: string } = (props) => {
  return <div>{props.children}</div>;
};

MyComponent.displayName = 'MyComponent';

{
  "rules": {
    "react/display-name": ["warn", {
      "ignoreTranspilerName": false,
      "checkContextObjects": true
    }]
  }
}

Frequently asked questions

What does "Multiple components with the same displayName" mean?

The displayName property in React is a string used primarily for debugging purposes. React DevTools and other debugging tools use displayName to identify components in the component tree. When multiple components share the same displayName, it becomes challenging to differentiate between them during debugging sessions.

How do I fix "Multiple components with the same displayName"?

This debugging issue occurs when multiple React components share identical displayName values, making it difficult to distinguish between them in React DevTools. While not a runtime error, it creates confusion during development and debugging.

What causes "Multiple components with the same displayName"?

Using React.memo without setting a unique displayName on the wrapped component Higher-order components (HOCs) that wrap multiple components without generating unique displayNames React.forwardRef components lacking explicit displayName assignments

Is the "Multiple components with the same displayName" error serious?

It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Found multiple elements with the non-unique id

  Found multiple elements with the non-unique id

  MEDIUM

• ReactDOM.render is deprecated and will be removed

  How to fix "ReactDOM.render is deprecated and will be removed" in React

  MEDIUM

• Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

  Cannot use ES modules with require() in React

  MEDIUM

• Module not found: Can't resolve 'react-dom'

  Module not found: Can't resolve 'react-dom'

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation