I recently shared a pair of videos about a Vite HMR gotcha, where saving a file left a stray setInterval timer running inside a Vue component.
You can revisit them here, the first video on spotting the problem, and the second video on the cleanup fix.
On the surface that looks like a pure development annoyance. HMR is a dev-only feature, so my first instinct was to file it under weird things that only happen while I'm coding and move on.
But while working through the fix, something nagged at me. The fundamental problem was never HMR. The frequent reloads while developing just happened to make it more visible.
In reality, the issue was that the timer I was creating was never properly tied to the component's lifecycle, so it wouldn't get cleaned up.
True, in production there is no HMR like we have in development, but components still come and go.
For example, a user navigates away and back, a parent re-renders, or a v-if flips.
Regardless of the cause, each time the component mounts, a fresh timer starts, and if the old one was never cleared, it keeps right on ticking.
Realizing that was a key insight for me, and it made me remember I've bumped into things like this before. Things that I thought were a dev annoyance were really an early warning sign for a real production bug.
So before you dismiss something like this in your local dev environment, take a few minutes to understand what is actually happening and why. Find the root cause, then ask whether that same thing could be a problem somewhere else that you aren't expecting.
Here to help,
Joel
P.S. The next time a dev-only quirk makes you shrug, it might be worth a closer look. If you want a second set of eyes on one, schedule a call with us.
