Hot module replacement, meestal afgekort tot HMR, is een ontwikkelfunctie die een stuk gewijzigde code in een draaiende app wisselt zonder de hele pagina te herladen. Op het moment dat een developer een aanpassing opslaat, wordt alleen die module vervangen en verschijnt het resultaat op het scherm, terwijl al het andere op zijn plek blijft.
Stel je voor dat je een kamer inricht en een nieuwe lamp wilt testen. Een volledige herlaad is alsof je alle stroom uitzet, de lamp plaatst, daarna alles weer aanzet en het meubilair opnieuw neerzet. HMR is alsof je alleen die ene lamp vervangt terwijl de rest van de kamer precies blijft zoals hij was. Voor een developer die een lang JavaScript formulier invult om het te testen, betekent dat dat het formulier niet bij elke kleine aanpassing leeg raakt.
HMR is nauw verwant aan hot reload, maar het is chirurgischer: in plaats van de pagina te verversen, vervangt het alleen het gewijzigde stuk. Het draait alleen tijdens het ontwikkelen en raakt de versie die je klanten gebruiken nooit.
Onder de motorkap houdt de dev-server een open WebSocket naar de browser. Verandert er een bestand, dan stuurt hij alleen de bijgewerkte module, en een klein stukje runtime in de pagina schuift die op zijn plek en draait het getroffen deel opnieuw. Tools als Vite en webpack doen dit allebei, al maakte Vite het merkbaar sneller door modules rechtstreeks te serveren.
Er is een grens die het waard is om te kennen. HMR werkt netjes voor zaken als stijlen en UI-componenten, maar diepe wijzigingen in kernlogica of gedeelde state kunnen de app in de war brengen, dus de dev-server valt stilletjes terug op een volledige herlaad. Komen aanpassingen niet meer goed door, dan is handmatig verversen meestal de oplossing.
Bij TopDevs zetten we HMR op elk project op, zodat onze developers elke aanpassing meteen zien, wat de lus tussen code schrijven en het zien werken korter maakt.
