Closed silverwind closed 10 months ago
The solution is to write:
import {memo} from "react";
const MemoFoo = memo(function Foo() {
return <div/>;
});
MemoFoo.displayName = "MemoFoo";
export default MemoFoo;
This is a bot verbose I agree but it's more imposed by the React team to improve naming inside the react devtool and stacktraces. I need to verify the difference in reality, and maybe it could be optional for some cases because this pattern actually fast-refresh correctly at runtime.
As far as I'm aware in regards to DevTools, displayName
is not necessary if it's a named function statement like above because DevTools can just access function.prototype.name
.
The export default
with the variable should work as far as the linter is concerned, thought I don't particularily like this verbosity :)
Fixed, will released later this week when other issues are handled!
Released in v0.4.4!
Results in
As far as I'm aware this is still a named component because of the function name and the module is asking for something impossible because a default export can not be named.
(The reason this can not be changed to a named export is because lazy requires a default export).