Hot Reload: hot reloading en hoe het de ontwikkeling versnelt

Wat is Hot Reload?

Hot Reload — is een ontwikkelmechanisme waarbij wijzigingen in bronbestanden onmiddellijk worden weergegeven in de draaiende applicatie zonder deze opnieuw te starten. De ontwikkelaar bewerkt code in de editor, slaat het bestand op en het resultaat is direct zichtbaar in de browser of emulator.

De belangrijkste eigenschap van de technologie is het behoud van de applicatiestatus. Variabelen in het geheugen, gegevens in formulieren, huidige navigatie — alles blijft op zijn plaats. De ontwikkelaar hoeft de reeks handelingen niet te herhalen om terug te keren naar het gewenste scherm.

In webontwikkeling wordt Hot Reload geïmplementeerd via het Hot Module Replacement (HMR)-mechanisme. De bundelaar volgt bestandswijzigingen, bepaalt welke modules zijn getroffen en stuurt de bijgewerkte code via WebSocket naar de browser. De browser vervangt alleen die modules zonder de pagina te herladen.

De populariteit van Hot Reload is enorm gestegen met de opkomst van single-page applicaties (SPA), waarbij het volledig herladen van de pagina de gehele status van de clientapplicatie vernietigt. React, Vue, Angular en andere frameworks bevelen HMR aan als de primaire ontwikkelmodus.

Hoe werkt HMR binnen de bundelaar

Het HMR-mechanisme bestaat uit vier fasen. De bundelaar aan de serverzijde compileert de gewijzigde module, maakt een JSON-patch met de nieuwe codeversie en stuurt deze via een WebSocket-verbinding naar de browser. Het browser-gedeelte van de HMR runtime ontvangt de patch, vervangt de oude module door de nieuwe en stelt de abonnees van de module op de hoogte.

Compilatie- en verzendfase

Webpack Dev Server gebruikt WebSocket voor communicatie met de client. Bij bestandswijziging maakt de bundelaar hot-update.js en hot-update.json met een manifest van wijzigingen. De client laadt deze bestanden automatisch via JSONP.

// webpack.config.js - HMR-configuratie
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false
  },
  plugins: [new HtmlWebpackPlugin()]
};

Module toepassen op de client

De HMR runtime in de browser controleert of de te vervangen module accept ondersteunt. Als de module module.hot.accept() heeft gedeclareerd, vervangt de runtime deze ter plekke en voert de update-callback uit. Als accept niet is gedeclareerd, valt HMR terug naar een hoger niveau, naar de bovenliggende module.

In React Fast Refresh is deze logica ingebouwd op framework-niveau — het is niet nodig om handmatig module.hot.accept in elk bestand te schrijven. De Babel-plugin react-refresh/babel voegt code toe die componenten veilig vervangt zonder statusverlies.

Verschil tussen Hot Reload, Live Reload en Full Reload

Deze drie termen worden vaak verward, maar verschillen fundamenteel in gedrag. Live Reload herlaadt de hele pagina bij elke wijziging — alle status gaat verloren. Full Reload vindt plaats bij het volledig herstarten van de ontwikkelserver met verlies van niet alleen de clientstatus, maar ook de serverstatus.

De keuze tussen Hot en Live heeft direct invloed op de ontwikkelsnelheid. Bij HMR duurt de cyclus ‘code gewijzigd → resultaat gezien’ 50-200 ms. Bij Live Reload — 1-3 seconden plus tijd voor contextherstel. Op een werkdag betekent dit tientallen minuten bespaarde tijd.

React Fast Refresh: functies voor React

React Fast Refresh — de officiële implementatie van Hot Reload geoptimaliseerd voor React-componenten. Het heeft het oude React Hot Loader-mechanisme vervangen, dat onstabiel was en handmatige configuratie vereiste. Fast Refresh is ingebouwd in Create React App, Next.js, Vite en Webpack via react-refresh/babel.

Ondersteuning voor functionele componenten

Fast Refresh behoudt correct de status van functionele componenten bij wijziging van hun code. Als u alleen de JSX-markup wijzigt — useState en andere hooks behouden hun waarden. Als de logica van een hook verandert — vindt opnieuw monteren van het component plaats.

// Voorbeeld - status behouden wanneer JSX verandert
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Regels voor veilige vervanging

Fast Refresh behoudt de status niet als de nieuwe code een compileerfout bevat. Als het component niet standaard wordt geëxporteerd (named export), kan de status ook verloren gaan. Het wordt aanbevolen om default export te gebruiken voor componenten en exports in memo te wikkelen als statusbehoud gegarandeerd moet worden.

Bouwgereedschappen met HMR-ondersteuning

Moderne bundelaars bieden HMR. Webpack — pionier van HMR met flexibele configuratie via devServer.hot. Vite gebruikt native ESM en esbuild voor directe HMR zonder bundeling. Parcel — zero-config HMR. Turbopack — de nieuwe bundelaar van Vercel met HMR op Rust.

Vite onderscheidt zich door snelheid — HMR in Vite werkt via native ES-modules van de browser. Bij bestandswijziging stuurt Vite alleen die module via import(), zonder het hele project opnieuw te compileren. Webpack compileert elke module volledig, wat bij grote projecten HMR vertraagt.

Voorbeelden van HMR-configuratie in projecten

Laten we de HMR-configuratie voor verschillende bundelaars bekijken. In Webpack moet u hot: true instellen in devServer en react-refresh/babel toevoegen. In Vite werkt HMR uit de doos met elke preset. In Next.js is Fast Refresh standaard ingeschakeld via de turbocompilator.

Vite met React

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    hmr: {
      port: 3001
    }
  }
});

Webpack 5 met Fast Refresh

// webpack.config.js
const ReactRefreshWebpackPlugin =
  require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: { hot: true },
  plugins: [new ReactRefreshWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.jsx?$/u,
        use: 'babel-loader'
      }
    ]
  }
};

Beperkingen en problemen van hot reloading

HMR werkt niet correct in alle scenario's. CSS-modules met dynamische klassen kunnen mogelijk niet worden toegepast. Globale variabelen en singletons (Redux store, router) kunnen worden gereset bij herladen. Zware bibliotheken genereren bij HMR soms geheugenlekken door vervanging van modules zonder GC.

Oplossing voor HMR-problemen — isoleer hete code in zuivere componenten zonder bijwerkingen. Bijwerkingen (WebSocket-abonnementen, timers) moeten worden opgeruimd in useEffect. Voor Redux wordt een persister aanbevolen die de status in sessionStorage opslaat. CSS-oplossingen zoals CSS Modules of styled-components werken correct met HMR zonder extra configuratie.

Nog een beperking — debuggen in productie: HMR wordt opzettelijk uitgeschakeld in productie-builds. De broncode is geminificeerd en hete vervanging in productie is onmogelijk. Voor het debuggen van fouten in productie worden source maps en logging gebruikt, maar niet HMR.