React Developer Tools shows all components as "Anonymous"

Question

I've installed the React Developer Tools extension on Google Chrome to debug a React application written in TypeScript, but once I start debugging the application and open the "Components" window, all components are shown as "Anonymous".

Granted, the application uses mostly function components.

Does anyone know if there is a way to get React Developer Tools to show component names in its component tree?

Answer 1

This happens when you define your components like so:

// Default arrow function export
export default () => {
    // ...
}

// Default function export
export default function() {
    // ...
}

You can replace with the following to fix the issue:

const CustomComponent = () => {
    // ...
}

export default CustomComponent;

// or

export default function YourComponent() {
  // ...
}

Answer 2

If you're using an exported anonymous functional component or a memo'ed component; it would be shown as Anonymous

Refer this - https://github.com/facebook/react/issues/17876

Or try solutions mentioned here - React Dev tools show my Component as Unknown