fix(hmr): skip HMR for JSX files with hooks

ArnaudBarre · ArnaudBarre · commit 37c776286ab3 · 2025-05-18T17:29:20.000+02:00
diff --git a/packages/common/refresh-utils.ts b/packages/common/refresh-utils.ts
@@ -1,7 +1,7 @@
 export const runtimePublicPath = '/@react-refresh'
 
 const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/
-const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/
+const refreshContentRE = /\$RefreshReg\$\(/
 
 // NOTE: this is exposed publicly via plugin-react
 export const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(
diff --git a/packages/plugin-react-oxc/CHANGELOG.md b/packages/plugin-react-oxc/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Skip HMR for JSX files with hooks
+
+The current HMR implementation was trying to all HMR files that contains either hooks or components, but this was working only for components and lead to HMR invalidation for JSX files containing hooks.
+
+The best solution would have been to support HMR for hooks, but in my testing it was sometimes leading to stale updates. So this simple and reliable solution is to skip HMR for these files and have the components handle the updates, like any other hooks file.
+
 ## 0.1.1 (2025-04-10)
 
 ## 0.1.0 (2025-04-09)
diff --git a/packages/plugin-react-swc/CHANGELOG.md b/packages/plugin-react-swc/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Skip HMR for JSX files with hooks
+
+The current HMR implementation was trying to all HMR files that contains either hooks or components, but this was working only for components and lead to HMR invalidation for JSX files containing hooks.
+
+The best solution would have been to support HMR for hooks, but in my testing it was sometimes leading to stale updates. So this simple and reliable solution is to skip HMR for these files and have the components handle the updates, like any other hooks file.
+
 ## 3.9.0 (2025-04-15)
 
 ### Make compatible with rolldown-vite
diff --git a/packages/plugin-react/CHANGELOG.md b/packages/plugin-react/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Skip HMR for JSX files with hooks
+
+The current HMR implementation was trying to all HMR files that contains either hooks or components, but this was working only for components and lead to HMR invalidation for JSX files containing hooks.
+
+The best solution would have been to support HMR for hooks, but in my testing it was sometimes leading to stale updates. So this simple and reliable solution is to skip HMR for these files and have the components handle the updates, like any other hooks file.
+
 ## 4.4.1 (2025-04-19)
 
 Fix type issue when using `moduleResolution: "node"` in tsconfig [#462](https://github.com/vitejs/vite-plugin-react/pull/462)
diff --git a/playground/hook-with-jsx/__tests__/hook-with-jsx.spec.ts b/playground/hook-with-jsx/__tests__/hook-with-jsx.spec.ts
@@ -0,0 +1,27 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+} from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('button')).toMatch('count is 0')
+  expect(await page.click('button'))
+  expect(await page.textContent('button')).toMatch('count is 1')
+})
+
+if (isServe) {
+  test('Hook with JSX HMR', async () => {
+    editFile('src/useButtonHook.tsx', (code) =>
+      code.replace('count is {count}', 'count is {count}!'),
+    )
+    await untilBrowserLogAfter(
+      () => page.textContent('button'),
+      '[vite] hot updated: /src/App.tsx',
+    )
+    await untilUpdated(() => page.textContent('button'), 'count is 1!')
+  })
+}
diff --git a/playground/hook-with-jsx/__tests__/oxc/class-components.spec.ts b/playground/hook-with-jsx/__tests__/oxc/class-components.spec.ts
@@ -0,0 +1 @@
+import '../hook-with-jsx.spec'
diff --git a/playground/hook-with-jsx/index.html b/playground/hook-with-jsx/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React hook with JSX</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/playground/hook-with-jsx/package.json b/playground/hook-with-jsx/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@vitejs/test-hook-with-jsx",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "workspace:*"
+  }
+}
diff --git a/playground/hook-with-jsx/public/vite.svg b/playground/hook-with-jsx/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
diff --git a/playground/hook-with-jsx/src/App.tsx b/playground/hook-with-jsx/src/App.tsx
@@ -0,0 +1,6 @@
+import { useButtonHook } from './useButtonHook.tsx'
+
+export function App() {
+  const button = useButtonHook()
+  return <div>{button}</div>
+}
diff --git a/playground/hook-with-jsx/src/index.tsx b/playground/hook-with-jsx/src/index.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/playground/hook-with-jsx/src/useButtonHook.tsx b/playground/hook-with-jsx/src/useButtonHook.tsx
@@ -0,0 +1,10 @@
+import { useState } from 'react'
+
+export function useButtonHook() {
+  const [count, setCount] = useState(0)
+  return (
+    <button onClick={() => setCount((count) => count + 1)}>
+      count is {count}
+    </button>
+  )
+}
diff --git a/playground/hook-with-jsx/tsconfig.json b/playground/hook-with-jsx/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true
+  }
+}
diff --git a/playground/hook-with-jsx/vite.config.ts b/playground/hook-with-jsx/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  server: { port: 8909 /* Should be unique */ },
+  plugins: [react()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
