memo components show as Unknown in the timings section of Chrome

[xaviergonz]

Given a component like

export const MyComponent = (p) => {...};
MyComponent.displayName = "MyComponent";

it shows properly as

but as soon as memo is added

export const MyComponent = memo((p) => {...});
MyComponent.displayName = "MyComponent";

it shows as Unknown instead

Note that both actually show properly on the tree explorer, the issue is only in the timings section of a performance recording in chrome.

[xaviergonz]

I also noticed that if this is done instead

const _MyComponent = (p) => {...};
_MyComponent.displayName = "MyComponent";
export const MyComponent = memo(_MyComponent);

then the timings section will show "MyComponent", it is as if the timings section was showing the wrapped component displayName for memo components, completely ignoring its own displayName.

[bvaughn]

Hey @xaviergonz. This issue should be filed against the React repo (assuming it's still happening). DevTools does not control the user timings that are shown in your screenshot. 🙇

[xaviergonz]

Thanks, just copied it to the react repo