Fast Refresh not working with page that is wrapped in a HOC #37405
-
|
Hello, I want to secure some pages in my website so I wrap them into a HOC that will check if user has logged in.
Here is my HOC implementation.
But when I make some changes in those pages, Next warns me about Fast Refresh will perform a full reload.
How can I fix this problem? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
SolutionIt is good to avoid anonymous functions because otherwise, the algorithm trying to figure out what to preserve can't do that very thing, specifically when HoCs are involved, or at least that's my take on it. In your case this snippet should work. That is, give a name to the Component definition (returned function) from const withNothing = <PageProps,>(Page: NextPage<PageProps>) => {
return function Enhanced(props: PageProps) {
const factor = 3;
const mult = 2 * factor;
return <Page {...props} />;
};
};or const withNothing = <PageProps,>(Page: NextPage<PageProps>) => {
function Enhanced(props: PageProps) {
const factor = 3;
const mult = 2 * factor;
return <Page {...props} />;
}
Enhanced.displayName = `withNothing(${
Page.displayName || Page.name || "NextPage"
})`;
return Enhanced;
};ExtrasI'd also suggest to avoid: const Home = withNothing(() => {
return (
<div>
Home <Link href="/blog">blog</Link>
</div>
);
});
export default Home;and do this instead, for cleanliness, and to keep things decoupled. const Home = () => {
return (
<div>
Home <Link href="/blog">blog</Link>
</div>
);
};
export default withNothing(Home) |
Beta Was this translation helpful? Give feedback.
Solution
It is good to avoid anonymous functions because otherwise, the algorithm trying to figure out what to preserve can't do that very thing, specifically when HoCs are involved, or at least that's my take on it.
In your case this snippet should work. That is, give a name to the Component definition (returned function) from
withAuthRequirement. In this case I call mine,Enhanced. I'd also recommend reading about naming conventions for HoCs.or