Definition
Hot reloading is a technique that swaps your edited code into a running app or web program in real time, without shutting it down and starting over. It keeps the work in progress and the state of the screen exactly as they were, so you can see just the changed part right away.
What if you had to wait after every single line of code?
Imagine you had to save your document and reboot your computer every time you fixed a single typo. Just picturing it is frustrating, and you'd never get anything done. Software development used to work in a way a lot like this.
In the past, even if a developer changed just one button color or one font size, the whole program had to be put back together from scratch (compiled and built), and the app had to be launched again from the beginning. That took anywhere from a few dozen seconds to a few minutes, so developers kept fixing a line of code and then staring blankly at the screen, over and over.
Hot reloading cut that waiting down a lot. When you save your code, the new design or feature usually pops up on screen in about a second. Developers can keep their flow going and see results instantly, as if painting on a canvas in real time.
The Key Difference Between Refreshing and Hot Reloading
It's easy to think of the browser's refresh button (F5), but hot reloading is on a different level from a plain refresh. A regular refresh (live reloading) wipes the page blank and loads it all over again, so everything about the screen's state is lost, like text you were typing or a menu you had open.
Say you're working on a shopping app. You add an item to your cart, type in a shipping address, and then tweak how the checkout button looks. With a regular refresh, you get kicked back to the home screen and have to start over from adding the item.
With hot reloading, the shipping address and the cart contents stay exactly as they are, and only the checkout button's code gets swapped out. When you're testing a screen deep inside the app, you don't have to repeat all the earlier steps, so development gets enormously more efficient.
To Be a Bit More Precise
To be a bit more precise, hot reloading is built on technology for swapping modules, which are independent pieces of code. In web development tools, a small communication channel (a WebSocket) is often kept open between the developer's computer and the running app. The moment a file is edited in the editor, only the changed piece of code is sent quickly to the running app.
The app overwrites the old code in memory with the new code right away and redraws only that part of the screen. In technical terms, this is also called Hot Module Replacement (HMR).
But hot reloading isn't a magic master key. It usually works well for simple visual tweaks and changes to individual logic. When the core structure that forms the app's skeleton or its basic configuration files change, though, the changes are only safely applied by fully restarting the whole program.
Common misconceptions
Hot reloading and the browser refresh (F5) are the same technology.
A refresh wipes the screen blank and loads everything again, but hot reloading swaps in only the changed code while keeping the data you were entering and the state of the screen.
Where you meet it
On a shopping app's checkout screen, you can change the checkout button from blue to green instantly without erasing the shipping address you typed into the form.
While building a phone app, you save your code and the text on a connected test phone suddenly gets bigger in real time.
In one sentence
Hot reloading is a development technique that swaps in only your edited code in real time, without losing the state of the screen you were working on.