Skip to content

DevTools: Order of higher-order component badges #21939

@eps1lon

Description

@eps1lon

Given

const StyleDiv = forwardRef(function Component({ children }, ref) {
  return <div ref={ref}>{children}</div>;
});

StyleDiv.displayName = `styled(connected(div))`;

-- https://codesandbox.io/s/little-sky-y8h1b?file=/src/App.js

I would expect that the badges from the display name are prioritized in the component tree.
However, devtools currently displays the ForwardRef badge first:

div ForwardRef +2
Screenshot from 2021-07-22 11-44-32

Oddly enough, the inline devtools in codesandbox do prioritize the badge from the displayName (maybe this regressed?):

div styled +2 Screenshot from 2021-07-22 11-45-27

There's also an argument to be made that devtools should not display the ForwardRef badge to begin with (since we explicitly omitted it in displayName). That can be discussed separately but would solve the issue entirely.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions