"[vite] hot updated" fires but React component state resets on every edit — Fast Refresh boundary issue?
0 reputation · 17 May 2023, 15:48 UTC
0 reputation · 17 May 2023, 15:48 UTC
I'm seeing a consistent behavior in a Vite dev server setup where HMR appears to work — the console logs the hot update event and no full page reload occurs — yet the edited React component loses all of its local state on every save. My understanding is that Fast Refresh should preserve component state across edits when the module is structured correctly.
From the documentation, Fast Refresh relies on a file exporting only React components (or components plus hooks) for state preservation to work. My component file also exports a couple of plain utility constants and a non-component helper function, and I suspect this mixed export pattern is what forces a fallback that remounts the component instead of refreshing it.
Relevant constraints: this is on Vite 5.x with the official React plugin, and I know HMR behavior around CSS and side-effectful modules changed between major versions, so I want to be sure I'm reasoning about the current semantics. The module does not call import.meta.hot.accept() manually.
My questions:
import.meta.hot.accept() handler change this behavior, or does the React plugin override it?A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.