useEffect does not re-fire on hot reload with React 19

[gkiely]

Describe the bug

Original issue filed here: vitejs/vite-plugin-react-swc#214, also applies to this plugin.

In prior versions of react, saving a file will trigger the components useEffect hooks to run. This does not work for react 19.

Reproduction

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

Steps to reproduce

• In vite.config.ts, comment out @vitejs/plugin-react-swc and uncomment @vitejs/plugin-react
• npm i
• npm run dev

Video example (using @vitejs/plugin-react-swc, but the same behavior is present for @vitejs/plugin-react)
https://www.loom.com/share/b493602e3f7244d2948c5bb871531881?sid=c9bdec15-5b87-4375-a659-6c63804cb032

System Info

System:
    OS: macOS 12.7
    CPU: (10) arm64 Apple M1 Pro
    Memory: 316.34 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.2.0 - ~/.volta/tools/image/node/20.2.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 10.8.0 - ~/.volta/tools/image/npm/10.8.0/bin/npm
    bun: 1.1.13 - ~/.bun/bin/bun
    Watchman: 2023.04.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 114.1.52.129
    Chrome: 125.0.6422.144
    Edge: 125.0.2535.92
    Safari: 17.5
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    @vitejs/plugin-react-swc: ^3.5.0 => 3.7.0 
    vite: ^5.2.0 => 5.2.13

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

I think this might be just something changed on React core side. I tested on Next.js (v15 rc with React 19) and it also doesn't fire effect on hot update https://github.com/hi-ogawa/reproductions/tree/main/react-19-hmr-next I went back to v13.4.0 and I got a previous behavior.

It looks like this also depends on React.StrictMode. I'm not sure if React team was aware of this, but probably it needs to be confirmed there.

Btw, this is an interesting find. Did you have use case relying on this behavior?

[gkiely]

Thanks for looking into it. I have opened a ticket here in the react repo.

My use case is debugging a useEffect 😂

[ArnaudBarre]

Finally took a look this and this is quite annoying, even when the content of the effect is updated. This happen only with strict mode enabled.

[eps1lon]

Tracking this in facebook/react#29915 as well. StrictMode went through a refactor in React 19 so it's not unlikely something broke considering Next.js has the same issue.