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

honor displayName set on ForwardRef if available #13615

Merged
merged 4 commits into from Sep 11, 2018

Conversation

@probablyup
Copy link
Contributor

@probablyup probablyup commented Sep 11, 2018

Since React.forwardRef returns a component object, some users
(including styled-components and react-native) are starting to
decorate it with various statics including displayName.

This adjusts React's various name-getters to honor this if set and
surface the name in warnings and hopefully DevTools.

probablyup added 2 commits Sep 11, 2018
Since React.forwardRef returns a component object, some users
(including styled-components and react-native) are starting to
decorate them with various statics including displayName.

This adjusts React's various name-getters to honor this if set and
surface the name in warnings and hopefully DevTools.
@pull-bot
Copy link

@pull-bot pull-bot commented Sep 11, 2018

Details of bundled changes.

Comparing: f6fb03e...7b1b7b7

schedule

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
schedule.development.js n/a n/a 0 B 19.17 KB 0 B 5.74 KB UMD_DEV
schedule.production.min.js n/a n/a 0 B 3.16 KB 0 B 1.53 KB UMD_PROD

Generated by 🚫 dangerJS

Loading

@gaearon
Copy link
Member

@gaearon gaearon commented Sep 11, 2018

@probablyup Can you describe your use case in more detail? What do you see in warnings/DevTools today, and what do you want to see instead?

Loading

@probablyup
Copy link
Contributor Author

@probablyup probablyup commented Sep 11, 2018

@gaearon Sure.

So one of the current nuisances around the forwardRef API is it creates an interim component that is shown in the DevTools, component trees, etc. For many libraries, it makes shipping a component that is readily identifiable in tools like enzyme impossible because the top level component is no longer ours, but ForwardRef. Thus shallow rendering becomes relatively useless and targeting quite difficult.

To get around this, various libraries (styled-components and react-native that I've seen so far) have begun decorating the component returned by the forwardRef API with displayName, etc. This should allow a forwardRef-wrapped component to appear the same in tooling, while layering in that useful ref functionality.

This is all a workaround for the additional component layer. If forwardRef was available as a decorator or class extend target, I don't think this sort of thing would be needed.

Loading

@gaearon gaearon merged commit e49f3ca into facebook:master Sep 11, 2018
1 check was pending
Loading
@gaearon
Copy link
Member

@gaearon gaearon commented Sep 11, 2018

Sounds good. Thanks.

Loading

@gaearon
Copy link
Member

@gaearon gaearon commented Sep 11, 2018

Loading

probablyup added a commit to probablyup/react-devtools that referenced this issue Sep 12, 2018
@probablyup probablyup deleted the use-displayName-forwardRef branch Sep 12, 2018
@gaearon gaearon mentioned this pull request Sep 13, 2018
bvaughn added a commit to facebook/react-devtools that referenced this issue Sep 27, 2018
Simek added a commit to Simek/react that referenced this issue Oct 25, 2018
* add failing test

* honor displayName set on ForwardRef if available

Since React.forwardRef returns a component object, some users
(including styled-components and react-native) are starting to
decorate them with various statics including displayName.

This adjusts React's various name-getters to honor this if set and
surface the name in warnings and hopefully DevTools.

* fix typing

* Refine later
jetoneza added a commit to jetoneza/react that referenced this issue Jan 23, 2019
* add failing test

* honor displayName set on ForwardRef if available

Since React.forwardRef returns a component object, some users
(including styled-components and react-native) are starting to
decorate them with various statics including displayName.

This adjusts React's various name-getters to honor this if set and
surface the name in warnings and hopefully DevTools.

* fix typing

* Refine later
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants