honor displayName set on ForwardRef if available #13615
Conversation
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.
Details of bundled changes.Comparing: f6fb03e...7b1b7b7 schedule
Generated by 🚫 dangerJS |
|
@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? |
|
@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. |
|
Sounds good. Thanks. |
* 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
* 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
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.