Some memo components displaying as Anonymous
a-x- opened this issue · 6 comments
const PageStatus = React.memo(
function PageStatus ({
splash, inline, loadingText, onHideError, successText: defaultSuccessText,
style, className, propses, classes, theme, errorIcon, errorPrefix, // стилизация
error, loading, success, // статус
}) {
// ...
});
I want to hide useless Anonymous wrappers in devtools
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.
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
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?
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.
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
@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.