For sure. Ever had to debug a bug deep inside of a webpage's code that relied on 5-10 preconditions to get it to appear? Without HMR, you're spending a lot of time F5ing and navigating to reproduce/fix it.
If only there was a way to programmatically reproduce the conditions under which the problem appears and then exercise the behaviour that triggers the bug. Then some code could verify whether the problem still appears. Once the problem is fixed this same “test” dark magic could help ensure the problem does not occur again.
You can add a test after debugging, no one's stopping you. But yes, it's annoying to debug some UI issue and having to set up an entire integration test for an issue you already know is there and can navigate much more easily via a mouse than via linking through HTML tag ids.
First, HMR doesn’t magically put you into a specific program state. Second, you can still HMR any website, as it is a feature of a bundler, not a web framework.
HMR is a feature of bundlers but your frontend code has to specifically interface with it if you want JS changes to live-apply to a running page without losing state instead of refreshing the page. With React, you have to use react-refresh in order to have HMR support. Frameworks like NextJS configure react-refresh and the bundler's HMR features together for you.
I had a tool that would automatically reload the page when files changed, it was great!
But I get what you mean; reloading a page is fine for simple pages, anything bookmarkable, but there's heavy weight pages on the one side, and state on the other. With hot reload, we're currently developing a React Native app, we can e.g. type stuff in a form field, update code, and the stuff will still be there while the behaviour around it changed. It's neat. While I miss native iOS development a bit, I don't miss the recompile/relaunch cycles.
