How to fix Multiple components with the same displayName in React

# 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
    }
  }
};