Mécanisme de développement qui remplace dynamiquement un module modifié dans l’application sans recharger la page entière, tout en préservant l’état courant (état React, données de formulaire, position de scroll, etc.).
Pourquoi c’est révolutionnaire ?
| Sans HMR | Avec HMR |
|---|---|
| Rechargement complet de la page | Mise à jour seulement du composant/modifié |
| Perte de l’état applicatif | État React/Formulaires/Scroll conservé |
| Temps d’attente à chaque modification | Retour immédiat (< 100ms) |
| Test manuel répétitif | Focus sur le composant en cours de dev |
flowchart LR
A[Modification fichier] --> B{Bundler détecte le changement}
B --> C[Compile le module modifié]
C --> D[Envoie le nouveau module via WebSocket]
D --> E[HMR Runtime remplace le module<br/>sans toucher au reste de l'app]
E --> F[État global préservé]Outils supportés
| Outil | Configuration | Vitesse |
|---|---|---|
| Vite | Natif (zéro config) | Ultra-rapide |
| Webpack | hot: true + plugin | Rapide |
| React Refresh | Plugin spécifique React | (état React préservé parfaitement) |
| Parcel | Natif | Rapide |
Cas concret : Modification d’un composant React → seul ce composant se met à jour, le compteur reste à « 42 » sans reset.