Prevent Vite doing a full reload

I work in React and have found that Vite’s instant refreshes certainly make my work faster. This usually happens incrementally, just reloading the components that were recently modified. Every now and then, though, Vite deems that a full refresh is necessary. It’s still quick, but for what I do it can be a pain.

I’ve found myself frustrated by this because I often working on projects where I’m building temporary interfaces as a development tool. To assess live data that’s streaming in while I problem solve an algorithm that I’m building.

I’m never going to publish the tool to a production site, it’s just something I run in dev locally while I record test data. So suddenly getting a refresh can often screw up the recording that I’m doing or the processing of the algorithms.

Below is a way to prevent Vite doing full refreshes.

To prevent Vite from doing full reloads, add the following code anywhere in your code base so that it runs once. I place it in my main.js, before React gets instantiated.

if (import.meta.hot) {
   import.meta.hot.on('vite:beforeFullReload', () => {
      throw '(skipping full reload)';
   });
}

The above code first checks if the hot module replacement API is available. Then it adds an event callback that throws an error just before Vite tries to do a full reload.

It should then show an error in the console whenever it tries to do a full reload instead of actually doing one. Other than that, your code should continue running as normal.

If you’re using Typescript, you may also need an import to prevent typing errors.

import 'vite/types/importMeta.d';

That’s it

I learned the technique above from this Github issue discussion. You can go there to find more information.

Thanks…

I also dissect and speculate on design and development.
Digging into subtle details and implications, and exploring broad perspectives and potential paradigm shifts.
Check out my conceptual articles on Substack or find my latest below.

You can also find me on Threads, Bluesky, Mastodon, or X for more diverse posts about ongoing projects.