What is Hot Module Replacement (HMR)?
A development feature that updates code in the browser instantly when you save a file, without requiring a full page reload. It preserves your application's state during development.
In plain English
HMR is like changing a tire on a moving car. Instead of stopping (full reload), pulling over, changing the tire, and restarting, HMR swaps out just the changed part while everything else keeps running. You don't lose your place in the app.
How it works
When you save a file during development, the build tool detects the change, recompiles only the affected module, and sends the update to the browser via a WebSocket connection. The browser replaces the old module with the new one while keeping the rest of the application state intact. In React, Fast Refresh preserves component state across edits. This is development-only — it's not used in production.
Why it matters for AI-built apps
When iterating rapidly with AI coding tools, HMR provides instant feedback on code changes. Without it, every change requires a full page reload — losing form state, scroll position, and navigation context. This dramatically slows down the AI-assisted development loop. Next.js includes Fast Refresh (React's HMR) by default.
Common issues
HMR not working (falling back to full reloads), state being lost on certain edits (editing hooks or adding new state), slow HMR updates in large projects, errors during HMR causing a broken state that requires a full reload, and HMR working for components but not for utility files or styles.
Best practices
Keep components as pure functions for the best HMR experience. Export only one component per file for reliable Fast Refresh. If HMR stops working, check the browser console for errors. Ensure your dev server is using the latest version of your framework. For styling, CSS modules and Tailwind have excellent HMR support. When HMR breaks, a full reload fixes it.
Frequently asked questions
Why does my Next.js page sometimes do a full reload instead of HMR?
Fast Refresh (Next.js HMR) falls back to a full reload in certain situations: when you edit a file that's not a React component, when there's a syntax error, when the module has side effects, or when a file exports non-component values alongside components. Check the console for messages indicating why Fast Refresh couldn't apply the update.
Does HMR affect production performance?
No. HMR is strictly a development feature. It's completely absent from production builds. Your production bundle contains none of the HMR machinery — it's stripped out during the build process. HMR's purpose is solely to speed up the development experience.
Check your app
Get a professional review of your app at a fixed price.
Security Scan
Black-box review of your public-facing app. No code access needed.
- OWASP Top 10 checks
- SSL/TLS analysis
- Security headers
- Expert review within 24h
Code Audit
In-depth review of your source code for security, quality, and best practices.
- Security vulnerabilities
- Code quality review
- Dependency audit
- AI pattern analysis
Complete Bundle
Both scans in one package with cross-referenced findings.
- Everything in both products
- Cross-referenced findings
- Unified action plan
100% credited toward any paid service. Start with an audit, then let us fix what we find.
Worried about hot module replacement (hmr) in your app?
Get a professional code audit ($19) or book a free call to discuss your concerns.