devtools: Remove ForwardRef/Memo from display name if displayName is set

[eps1lon]

Summary

The displayed name of e.g.

const Component = forwardRef(function Component() {
  return null;
});
Component.displayName = `Component`;

will no longer include the ForwardRef badge in the element tree. This also applies to React.memo.

This matches how display names are computed in getComponentNameFromType e.g. in warnings.

Closes #21939

Test Plan

• CI green
• linked codesandboxes produce desired display name See ForwardRefComponentWithCustomDisplayName in react-devtools-shell
  Before:
  
  After:
  

  -Custom ForwardRef
  +Custom 

[eps1lon]

I think we should sync the display names for memo as well. React will compute Component while devtools will display it as Memo(Component). No strong opinion whether we want to use Memo as a wrapper or fallback. For me personally React.memo is used like a higher-order component i.e. Memo as a wrapper is intuitive for me.

[bvaughn]

See #21939 (comment)

[ryota-murakami]

I think, DevTools should be there based on @bvaughn decided in previous conversation.
Even though I know that feeling @eps1lon mentioned situations are not good experience with DevTools by default.

But I think problem root is library implementation. most of React library overused HOC Context value injection layer, ReactDevTools right.
And more, React is only provided view as a library so external library tend to providing invisible component(Called HOC) as a API of their business logic.

As a result, causing noises against actual view component by invisible component that's just a library interface doesn't appear screen but existing on screen as a empty layer.

DevTools Hide components is right solution i think, finally my opinion about a badge that should't hide it because display component information is DevTools must role certainly.

[stale]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[eps1lon]

Bump

[inoyakaigor]

@eps1lon any updates for this?

[eps1lon]

@eps1lon any updates for this?

Rebased and added screenshots and a digest of the diff in display names in devtools.

[lunaruan]

LGTM. Thanks for doing this!

[lunaruan]

Nit: Could just inline this

[eps1lon]

The idea was to just copy the logic from whatever React packages are using so that it's easier to sync it. But then Devtools cover a bunch of React versions so it's probably fine to do things differently. Will check if this is trivial to do (i.e. do I remember how this one year old PR works ;D )

[eps1lon]

Makes sense. It actually save potentially wasted work if outerType.displayName is set.