honor displayName set on ForwardRef if available

[quantizor]

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.

[pull-bot]

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

[gaearon]

@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?

[quantizor]

@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.

[gaearon]

Sounds good. Thanks.

[gaearon]

Also let's tweak this:

https://github.com/facebook/react-devtools/blob/0b9fc7fb42f232069b950a695665ebf22dbc044f/backend/attachRendererFiber.js#L193