How can I avoid full page reloads?

[devuxer]

I seem to get a full page reload no matter what I do.

Add a console.log statement to a component? Full page reload.
Remove a console.log statement from a component? Full page reload.
Change a button label? Full page reload.
Breath on the keyboard? Full page reload. (okay, I kid)

Any idea what could cause this?

At the moment, I'm including the react plugin in my vite.config with zero arguments. Here is what I have for plugins:

plugins: [
    react(),
    viteTsconfigPaths(),
    svgrPlugin(),
]

In my console, I see messages like "hmr update" and "hmr invalidate". I only seem to get "hmr invalidate" when I have an error in my code (in which case, I'd expect a full page refresh), but even when it shows "hmr update", I still get a full page refresh. I thought HMR surgically re-renders only the component I edited (and its children), not the whole app.

[ArnaudBarre]

You should update to the latest version of the plugin you will get a message on why the file was invalidated.
There are rules to follow in React to get HMR working: https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
If you're using eslint, you can try https://github.com/ArnaudBarre/eslint-plugin-react-refresh to find some issues

[devuxer]

I was using lazy because I wanted to show my about/loading panel using Suspense while the App loads (which takes about 5 seconds), not because I want the App component to load on demand (it will of course load every time).

I'm open to suggestions on how to do this a different way, though, if you think it's harming user or developer experience. Now that I've got Fast Refresh working, though, I'm not sure I see any downside.

[ArnaudBarre]

For that personally what I'm using it a small piece of html with the inline style in the root element that get replace when the app mount. So you get a working spinner in the first bytes of your page

[devuxer]

Everything is working perfectly now, though. I am no longer experiencing full-page reloads. If I make a change, it updates immediately in the browser.

A couple notes on my situation:

1. This is the front-end of an Electron desktop app, so bundle size, code splitting, etc. is not a priority.
2. My Fallback is a non-trivial React component, not just an icon/spinner, so it would not be straightforward to just put that in the HTML.

[ArnaudBarre]

Ok sounds good in that case 👍

[devuxer]

Thanks for your help!

[eisa-rezaei]

Hi,I have same issue, I didn't quite catch what should i do to prevent all page refresh could you provide me with an answer ? it takes lots of my time for any change.