Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API for display name on forwardRef, memo and potential future exotic components #17862

Closed
eps1lon opened this issue Jan 17, 2020 · 0 comments
Closed

Comments

@eps1lon
Copy link
Collaborator

eps1lon commented Jan 17, 2020

Continuation of #14319 which was closed by a bot. I would hope that a maintainer takes the time and reopens the original issue and closes this one, thanks.

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 ReactIs.typeOf for non-elements #12882, related: [react-is] Add elementType API #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants