If you create a component via React.memo and then explicitly provide it with a displayName, DevTools ignore this display name.
React version: 16.12.0
DevTools version: 4.4.0
Steps To Reproduce
- Create a component like:
const FancyMemoComponent = React.memo(() => 'Check my name in DevTools')
- Provide it with a
displayName
FancyMemoComponent.displayName = 'FancyMemoComponent'
- Check its name in DevTools.
Link to code example: https://codesandbox.io/s/react-memo-display-name-vk7gv
The current behavior
DevTools do not display the given displayName.
The expected behavior
DevTools should display the given displayName.
Comments
I am aware that the name can be picked from the function inside React.memo, but I prefer using anonymous functions.
I am using this workaround:
FancyMemoComponent.type.displayName = 'FancyMemoComponent'
If you create a component via
React.memoand then explicitly provide it with adisplayName, DevTools ignore this display name.React version: 16.12.0
DevTools version: 4.4.0
Steps To Reproduce
displayNameLink to code example: https://codesandbox.io/s/react-memo-display-name-vk7gv
The current behavior
DevTools do not display the given
displayName.The expected behavior
DevTools should display the given
displayName.Comments
I am aware that the name can be picked from the function inside
React.memo, but I prefer using anonymous functions.I am using this workaround: