hirosystems
[DX] Fix React Developer Tools showing all components as "Anonymous"
Is your feature request related to a problem? Please describe.
It is hard for new contributors (like me) to start giving a hand since almost all the components are shown as Anonymous in React Developer Tools (Components tab). It could be hard to find how a component is named and edit its file.
Describe the solution you'd like This issue is present for all memo'ed components.
There are two solutions to solve this.
Solution 1: Moving React.memo to the export default. This may not be a solution for all components, that's why I would go with solution number 2.
Describe alternatives you've considered
Solution 2: Adding ComponentName.displayName = "ComponentName" for exportoed components, restarting tthe Next.js app, and checkign again the Components tab from React Developer Tools.
displayName is used in development builds as it is removed through dead-code elimination on production builds and should not be relied on within your application.
Additional context I think this one of the features that will greatly improve the Developer Experience.
Hi, thanks for reporting this.
We've done a refactor of the UI layer. Would you mind reviewing if this issue is gone please?
