vite HMR is silently the reason ur laptop fan wont stop

#vite #react #performance #webdev

ur working on a react app. ur fan kicks on. u assume chrome is the culprit, or slack, or the LSP. close tabs, kill apps, fan keeps spinning.

actual cause in 6 out of 10 projects i audit on macOS: vite's hot module replacement (HMR) doing way more work than needed. default config keeps websocket connections alive, polls file changes, rebuilds bundles aggressively. on a multi-monitor M-series macbook this lands as a consistent fan-on state even when ur not typing.

confirm its HMR first

quit ur dev server. wait 30 seconds. does the fan calm down?

yes → its HMR. no → look elsewhere (chrome tabs, docker, slack helper).

one-line fix

vite respects HMR env. flip it off when u dont need live reload:

HMR=off pnpm dev

or in vite.config.js:

export default defineConfig({
  server: {
    hmr: process.env.HMR !== 'off',
  },
});

with HMR off, vite still serves files but stops the websocket + file-watcher loop. CPU drops 30-50% on my M2 air. fan stops in 60 seconds.

when to keep it on

active feature dev: yes, u want HMR. saves 5-10s per save.

code reviews, doc reading, screencast watching while dev server is technically running but ur not editing: HMR is pure overhead. run with HMR=off.

i added this as a package.json script:

{
  "scripts": {
    "dev": "vite",
    "dev:cold": "HMR=off vite"
  }
}

then pnpm dev:cold for any session where im not actively editing the frontend.

why this is silent

vites docs treat HMR as always-on. perf cost is documented in their FAQ but not the getting-started flow. most react tutorials install vite + dont mention the HMR escape hatch. result: devs ship apps assuming "vite is fast" without realizing their dev session keeps the fan on 8 hours a day.