In React, I can give my component a custom name for debugging, via the displayName
property.
This supports a special format for HOCs:
WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`
which shows in the React DevTools as:
The component name shown is what you put inside parentheses.
However, I've noticed that if I put parenthesised items before, instead of after:
WithSubscription.displayName = "(tag1)(tag2)(tag3)WithSubscription";
This is different; the component name is the one outside parentheses.
Is there any documentation or further info on this, or any other features supported by displayName
, it isn't mentioned in the link I provided?
I looked into this further and, as @Bergi suggests, it's an implementation issue.
The source function in React DevTools can be found here. The relevant piece of code is:
if (displayName.indexOf('(') >= 0) {
const matches = displayName.match(/[^()]+/g);
if (matches != null) {
displayName = matches.pop();
hocDisplayNames = matches;
}
}
The regex will match each item like this:
The .pop()
will take out whatever the last match is and make it the displayed component name,
with all other matches becoming HOC display names.
There doesn't appear to be any code that considers any other special formatting inside displayName
, just this.