Some memo components displaying as Anonymous about react-devtools-experimental

[KevinGhadyani-minted]

It looks like facebook/react#17274 is supposed to fix this, but it doesn't because I'm still seeing this today:

Created from revision 23309eb38 on 5/18/2020.

[Sawtaytoes]

@mateja176 Correct.

The working solution I have today is similar, but more-specific:

const propTypes = {}

const MyComponent = () => <div />

MyComponent.propTypes = propTypes

const MemoizedMyComponent = memo(MyComponent)

export default MemoizedMyComponent

This way, propTypes works properly as well.

[KevinGhadyani-minted]

It's really strange. I'm having the same issue. Because you're doing PageStatus =, it should pick that up as the display name.

I even tried doing:

PageStatus.displayName = 'PageStatus'
PageStatus.name = 'PageStatus'

Neither worked.

Something's weird about how react handles memoized functions. I think the goal here is for you to do:

const MemoizedPageStatus = memo(PageStatus)

In the past, I had to use a Babel plugin to get components wrapped by higher-order components to show up with the correct name. This was especially important when doing export default connect(...)(PageStatus). That plugin is extract-hoc:
https://github.com/quangbuule/extract-hoc

I'd prefer to not rely on a 3rd party lib. In this particular instance, I don't have this plugin loaded nor have I tested it in a few years. The point I'm saying is that I had to work around this in the past, but only when the exported name was non-existent. In this case, PageStatus is clearly defined as the function's name.

Maybe this is an issue in the React.memo function?

[bvaughn]

Anonymous is the fallback name that is displayed if the function has no intrinsic .name or user-supplied .displayName. Generally this means it was declared as an anonymous inline function, e.g. React.memo(props => ...).

You can "hide" them if you want, using a component filter with a "name" of "Anonymous" but it would probably be better to use a named function so they show up in the tree with meaningful names.

This isn't a DevTools bug so I'm going to close this issue.

[mateja176]

It looks like facebook/react#17274 is supposed to fix this, but it doesn't because I'm still seeing this today:

Created from revision 23309eb38 on 5/18/2020.

I changed

const PageStatus = React.memo(
  function PageStatus ({
    splash, inline, loadingText, onHideError, successText: defaultSuccessText,
    style, className, propses, classes, theme, errorIcon, errorPrefix, // стилизация
    error, loading, success, // статус
  }) {
    // ...
});

to

const PageStatus = function PageStatus ({
    splash, inline, loadingText, onHideError, successText: defaultSuccessText,
    style, className, propses, classes, theme, errorIcon, errorPrefix, // стилизация
    error, loading, success, // статус
  }) {
    // ...
}

export default React.memo(PageStatus);

And the component name displayed correctly in the devtools. This is most likely relared to the following question

[a-x-]

I showed the source code.

I wrapped function PageStatus (...) {...} into React.memo

it's common practice to avoid Anonymous component names in the dev tools