javascriptreactjsreact-devtools

What is the format of React displayName?


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:
React DevTools HOC screenshot
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";

It will show up like this:
React DevTools tags screenshot

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?


Solution

  • 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: source code regex breakdown

    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.