Closed JiangWeixian closed 1 year ago
So yeah this file is not respecting the rules of Fast refresh:
CONSTANT
is not a react component, but will be correctly handle by the Vite plugin because this is easy to diff between files updates. In that exceptional cases, you can ignore the lint rule if the constant is not edited.Foo
is lying the eslint plugin (and probably the runtime check if count is kept) because this has the format of a component (function that starts with an uppercase) but the code shows that it's not (technically in recent React version not retuning is allowed, but the render is doing a side effect wihtout useEffect so this clearly not a component). You should rename this function to foo
and move it to another file if you want proper updates. If you only rename but don't move, the Vite plugin will invalidate the file on every updates, which will cause the count state to be lost. A way to see that the HMR is not working properly because of this "lie" is to update 6
to something else and rerun the function in another file, this will still uses the old valueI hope it's clear!
Edit: For the constant export, this could be allowed by the plugin via an option though (I don't want to make it a default because I don't think other integrations handle this specific case)
https://user-images.githubusercontent.com/6839576/231635195-c3e732cd-6952-4372-ba24-69360bd957fe.mp4
You are correct, I update vite
to @4
, found when I update foo
inside button.tsx
, vite
will invalidate this file(in @3
it logs hmr update
). However, button state looks like kept.
Thanks for you job! I test on vite based project, when I create a
button.tsx
file, contains:When I edit this file, it's safety hmr update. Do I miss something?