Bug: Devtools shows Anonymous for memoized function components

[jwongnz]

React version: 16.12.0
React dev tools version: 4.4.0

Steps To Reproduce

1. create-react-app
2. Render memoized function component
3. Inspect the component with latest React dev tools chrome extension

The current behavior

Component's name in devtools is Anonymous, I've seen adding a displayName work in the past but it does not anymore.

The expected behavior

Name of component in devtools should be the set displayName.

[alikadir]

I have similar issue,
default exported component shows anonymous in devtool

[Kelbie]

I think I found a workaround. If you do SomeComponent.type.displayName = "SomeComponent" it works. Here is a codesandbox for reference: https://codesandbox.io/s/laughing-rgb-v0puv

[threepointone]

I would not recommend mutating type. A 'proper' fix for this, is to use a named function with React.memo, like so -

const SomeComponent = React.memo(function SomeComponent(){
  // ...
})

forking your example - https://codesandbox.io/s/laughing-rgb-v0puv-c0nc5

This could be enforced with an eslint rule (similarly for forwardRef, imo)

Closing since this is expected behaviour.

[moonrailgun]

@threepointone
Hi. I dont think its a good idea.

We use displayName to ensure we can check correct name in production environment. Not a compressed function name if use any js compress tools.

and its also have a problem of typescript is the type defintion look like allow set displayName. its return NamedExoticComponent

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/28ff2e3a70ee7172902b2efb0f0c527e8ada0430/types/react/index.d.ts#L798-L801

Please consider it, Please!

[iyunusov]

So did anyone fix the issue? I still see all Anonymous components when inspected. :(

[coding-sue-true]

Do you still see if you do the below?

const SomeFunction = () => { return () }
export default SomeFunction

[adenekan41]

Still happening in 2022. and still the same solution

/**
 * Set display name for the component so it's easily debuggable.
 * the memo method prevents the FC from being named
 */
SomeComponent.displayName = 'SomeComponent';