HMR with Fast Refresh

Hot Module Replacement (or HMR) allows modules to be updated at runtime without the need for a full refresh during development. To support this, Aleph.js's built-in HMR module creates a WebSocket connection to the dev server on the client, and the server listens for file changes. Once the HMR client gets an update signal from the server, Aleph.js will re-import the updated module.

For a CSS module, the old style will be removed after the new one is applied. For a React Component, Fast Refresh will re-render the component view without losing component state.

Aleph.js supports full HMR out-of-the-box for the following served files:

• JSX/TSX in pages and components directory
• Files loaded by loader plugin with acceptHMR enabled

What Is Fast Refresh

It's a reimplementation of "hot reloading" with full support from React. It's originally shipped for React Native, but most of the implementation is platform-independent. The plan is to use it across the board, as a replacement for purely userland solutions (like react-hot-loader). ¹

Limits

• Fast Refresh only supports functional components with hooks.
• Functional components using default exports must be named: export default function ComponentName() { ... }.