React: API for display name on forwardRef, memo and potential future exotic components

[eps1lon]

TL;DR: Can you expose shared/getComponentName?

Do you want to request a feature or report a bug?
Expose an API to get the display name of every component (in __DEV__ only).

What is the current behavior?
Most of the ecosystem still uses Component.displayName || Component.name || someFallbackName
(with some branching depending on the type of Component) when setting the display name of an enhanced component i.e. connect()(WrappedComponent) will result in "connect(WrappedComponent)" as a displayName.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Since components created by forwardRef or memo are not actual functions these higher-order components are not able to determine a proper display name while react-devtools is able to:

https://codesandbox.io/s/zqj9v50243

• react-redux creates "connect(Component)"
• react-router creates "withRouter(undefined)"

What is the expected behavior?
The new "exotic-components" should work with the existing 3rd party libraries WRT to displayName.

Now there are a couple of solutions to this issue:

1. Edit: Expose shared/getComponentName
2. This is the responsibility of the ecosystem. It should provide a solution and maintain it. Somewhat blocked by #12882, related: #12932
3. Grant access to the functionality used in react-devtools (or would this only work on the fibers?)
4. Set a name (or displayName no preference here) property on those "exotic-components" (don't know how to call them). Naive implementation e.g.: name: 'ForwardRef(' + fn.name + ')'.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I guess this started with forwardRef in 16.3.

[martinmckenna]

+1 here. My current solution to smoke testing React.memo components is to add a custom attribute such as

qa-my-child-component

and then with jest-enzyme

shallow(<MyComponent />).find('[qa-my-child-component]').toHaveLength(1).

Ideally, I'd like to do

shallow(<MyComponent />).find('MyChildComponent')

[jquense]

forwardRef does use the inner function name as the displayName, e.g. ForwardRef(InnerName)

[eps1lon]

@jquense In what version? It has a display name in react-devtools but no actual property displayName.

[foisonocean]

Any updates?

[eps1lon]

@foisonocean Upvote the issue, subscribe and wait for updates. Asking for updates is just noise for other people watching for updates.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[o-alexandrov]

Not stale. If possible, please reopen as currently we have to wrap in custom display name helpers that infer name of the module from the Webpack API

[eps1lon]

I just clicked read all since stale bot just spammed my notifications (watching full repo). Maybe I missed some announcement regarding how open source is viewed in this repository but letting stale bot loose is a clear push back against outside contributions. If the core team does not handle outside contributions who is supposed to? We're just expected to spam the threads to keep them alive?

[bvaughn]

@stale bot gives a full week to allow anyone to comment on an issue so that it considers it no longer stale. In this case, no one commented and so the issue was closed.

I understand why this bot could seem a little frustrating to external contributors, especially combined with the fact that PRs often wait for a long time before someone on the core team reviews them. Unfortunately the PR situation is a natural result of the React community being very large (yay! 🥳) and our team being very small (only 8 developers).

@stale bot is something new we are trying. We think it will help clean up the repo over time. (A lot of things it identifies as stale are legitimately stale!) In cases where we have false positives, issues can be re-opened.

Like this one 🙂

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

bump

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[o-alexandrov]

bump