React dev tools works perfectly (properly shows the name of the component in components tab) when you have something like:
const MyComponent = ...
export { MyComponent }
But if you change it to inline exporting:
export const MyComponent = ...
it displays the component name as Anonymous.
Is something wrong with inline exporting in general?
For inline exporting you need to manually specify the displayName property (I know, it's a pain).
So you do
export const MyComponent = () => {
//stuff happens here
}
MyComponent.displayName = "MyComponent";
I think
export function MyComponent() {
works, the linter usually complains when you doconst MyPureComponent= React.memo(()=>{
butcosnt MyPureComponent = React.memo(function MyPureComponent() {
will fix that.Got it, but it definitely looks like an issue for dev tools, do you think so?