react icon indicating copy to clipboard operation
react copied to clipboard

[React 19] useEffect does not re-fire on hot reload with React 19 and vite

Open gkiely opened this issue 1 year ago • 7 comments

In prior versions of react, saving a file will trigger the components useEffect hooks to run. This does not work for react 19. This applies to both @vitejs/plugin-react-swc and @vitejs/plugin-react

Repo: https://github.com/gkiely/swc-issue

Steps to reproduce:

  • npm i
  • npm run dev
  • open repo and press save in App.tsx
  • console.log will not fire after pressing save
  • npm i react@18 react-dom@18
  • npm run dev
  • press save in App.tsx
  • console.log will fire

Video reproduction: https://www.loom.com/share/b493602e3f7244d2948c5bb871531881?sid=c9bdec15-5b87-4375-a659-6c63804cb032

Notes: I previously opened a ticket here but it is perhaps an issue with react 19: https://github.com/vitejs/vite-plugin-react/issues/335

gkiely avatar Jun 16 '24 17:06 gkiely

Hey @gkiely - I'd like to work on this issue

prafulla-codes avatar Jun 18 '24 05:06 prafulla-codes

I've looked into it and this happen only with StrictMode enabled.

ArnaudBarre avatar Jul 21 '24 16:07 ArnaudBarre

Does this work in React 18?

eps1lon avatar Jul 22 '24 09:07 eps1lon

Yep, React with 18 useEffect runs everytime if the file is updated

ArnaudBarre avatar Jul 22 '24 10:07 ArnaudBarre

Can reproduce with the provided repro and also [email protected]. I also double checked by using breakpoints to ensure it's not just console.log being incorrectly silenced.

eps1lon avatar Jul 22 '24 14:07 eps1lon

Gentle bump on this @eps1lon.

gkiely avatar Dec 06 '24 21:12 gkiely

Still not fixed?

kg55kmr avatar May 26 '25 11:05 kg55kmr