HMR / Fast Refresh caveats in popular JavaScript UI frameworks

General

• Don’t render() in the same file as the root component

🔴 DON’T

// main.jsx
const App = () => <></>

render(<App />)

🟢 DO

// main.jsx
import App from './app'

render(<App />)

// app.jsx
const App = () => <></>

export default App

• Don’t use anonymous default export

🔴 DON’T

export default () => <></>

// Or
export default function () {
  return <></>
}

🟢 DO

const App = () => <></>

export default App

// Or
export default function App() {
  return <></>
}

Frameworks

React - Fast Refresh

Preact - Prefresh

Solid - Solid Refresh

solidjs/solid-refresh#12 Feature: HMR support

• 🟢 Preserves external state [1]
• 🟡 With @refresh granular pragma: preserves local state in child components [2]
• 🔴 Does not preserve local state [3]

// app.jsx
// @refresh granular
import Component from './component'

const AnotherComponent = () => <></> // [2]

const App = () => (
	<>
		<Component />
		<AnotherComponent />
    Text {/* [3] */}
	</>
)

// component.jsx
const Component = () => <></> // [1]

export default Component

Svelte - svelte-hmr

• 🟢 Preserves external state [1]
• 🔴 Does not preserve local state [2]

<!-- app.svelte -->
<script>
	import Component from './component.svelte'
</script>

<div>
	<Component/>
	Text <!-- [2] -->
</div>

<!-- component.svelte -->
<div></div> <!-- [1] -->

Vue