State resets with React Fast Refresh #1150

alan-nf · 2022-05-10T21:55:45Z

Expected: when React Fast Refresh updates UI on save, jotai state should not be lost. E.g. a primitive counter atom like const countAtom = atom(0) should maintain it's value across fast refreshes.
Actual: all jotai global state resets when React Fast Refresh updates the UI.

Codesandbox: https://codesandbox.io/s/jotai-react-refresh-bug-807nez?file=/src/Jotai.tsx
Local demo: https://github.com/alan-nf/jotai-react-refresh-issue

Instructions:

Click the +1 button to increment the counter
Edit the text in the Copy component to say something else. The counter will be reset back to 0.

NOTE: related discussion about React Fast Refresh being broken in #1025. I cannot reproduce things being totally broken and I'm just seeing this reset issue.

The text was updated successfully, but these errors were encountered:

dai-shi · 2022-05-11T02:56:17Z

@Thisen Can you take a look?

Thisen · 2022-05-11T08:47:39Z

I'll take a look!

Thisen · 2022-05-11T09:30:13Z

@alan-nf, the Codesandbox doesn't seem to be using the jotai/babel/plugin-react-refresh. Am I blind? 😅

alan-nf · 2022-05-11T18:24:18Z

No you're not blind, heh. It's using Create React App which uses react refresh under the covers

from https://javascript.plainenglish.io/react-fast-refresh-the-new-react-hot-reloader-652c6645548c:

Starting from 4.x, Create React App enables React Fast Refresh by default. If your project is built off of Create React App, all you need to do is upgrade.

more specifically, it's using @pmmmwh/react-refresh-webpack-plugin@^0.5.3

This is where it's hooked up: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L35

alan-nf · 2022-05-11T18:29:11Z

And, if you grab the demo that can run locally, you can save a file edit and then see the network requests related to the react refresh update:

alan-nf · 2022-05-11T18:32:47Z

I noticed that the hot update includes the atom declaration, presumably because it's in the same file as the component I'm editing. If I move that component to a separate file and edit it there, the jotai state stops resetting. That seems like totally reasonable behavior, and therefore isn't really reproducing the issue that caused me to file this bug report in the first place.

In my codebase, editing files that do not have the jotai atom declarations are still resulting in the reset, so I guess I'm hitting a different bug. I'll try to get a simple repro of that issue.

alan-nf · 2022-05-11T19:02:21Z

Ugh, I can't reproduce with vite, even when I perfectly match the versions of all the packages in my codebase. Here it is working just fine: https://stackblitz.com/edit/vitejs-vite-2tuyjr?file=src/App.tsx

I'm going to try to figure out why this isn't working specifically in my codebase. I'll reopen this issue if I can get a correct repro of the problem.

dai-shi · 2022-06-03T23:57:46Z

#1203 (comment)

@Thisen can you communicate with @alan-nf about this?

Thisen · 2022-06-07T07:26:42Z

I'll look into this.

@alan-nf can you add an updated reproduction?

alan-nf · 2022-06-13T02:55:46Z

I'll work some more on getting a proper repo.

Question: if I'm using vite and the @vitejs/plugin-react vite plugin, do I need anything else to get full react refresh support? Do I still need the jotai/babel/plugin-react-refresh babel plugin?

bstro · 2022-06-15T17:24:03Z

fwiw I'm experiencing this issue as well w/ Vite 2.9.9, React 18, Jotai 1.7.2.
Not sure if this is helpful, but here's a repro on stackblitz.

steps to reproduce:

click the count is 0 button a few times
add some text to the document.

Thisen · 2022-06-20T11:41:24Z

I'll work some more on getting a proper repo.

Question: if I'm using vite and the @vitejs/plugin-react vite plugin, do I need anything else to get full react refresh support? Do I still need the jotai/babel/plugin-react-refresh babel plugin?

Yes, we only support React Refresh with the jotai/babel/plugin-react-refresh.

Thisen · 2022-06-20T11:42:57Z

fwiw I'm experiencing this issue as well w/ Vite 2.9.9, React 18, Jotai 1.7.2. Not sure if this is helpful, but here's a repro on stackblitz.

steps to reproduce:

click the count is 0 button a few times

add some text to the document.

I'll look into vite support.

Thisen · 2022-06-21T21:11:11Z

@bstro have you tried to configure vite to use the Jotai Babel preset?
https://github.com/vitejs/vite/tree/main/packages/plugin-react#babel-configuration

bstro · 2022-06-22T17:20:35Z

@Thisen yes, I copied the setup from the guide on my project and it has no effect.

I can't use it in the StackBlitz example—for some reason adding the jotai babel plugin triggers this compilation error: [plugin:vite:react-babel] /home/projects/vitejs-vite-akwqmd/src/main.tsx: _babel_template.default is not a function

Thisen · 2022-06-23T19:33:24Z

@Thisen yes, I copied the setup from the guide on my project and it has no effect.

I can't use it in the StackBlitz example—for some reason adding the jotai babel plugin triggers this compilation error: [plugin:vite:react-babel] /home/projects/vitejs-vite-akwqmd/src/main.tsx: _babel_template.default is not a function

Can you make a reproduction in Github repo that I can clone?

bstro · 2022-06-26T21:23:16Z

Here's a reproduction on stackblitz of my state reset issue.

The bug I'm seeing might be related to jotai's xstate module rather than @alan-nf's original issue. So far, I have only been able to reproduce the bug when using atomWithMachine.

I hope this is helpful in some way.

Thisen · 2022-06-27T08:07:41Z

Here's a reproduction on stackblitz of my state reset issue.

The bug I'm seeing might be related to jotai's xstate module rather than @alan-nf's original issue. So far, I have only been able to reproduce the bug when using atomWithMachine.

I hope this is helpful in some way.

I'm not sure how much I can do without a reproduction using only the core modules. @dai-shi, any ideas if we could have a problem with xstate module?

dai-shi · 2022-06-27T13:03:42Z

Here's a reproduction on stackblitz of my state reset issue.
The bug I'm seeing might be related to jotai's xstate module rather than @alan-nf's original issue. So far, I have only been able to reproduce the bug when using atomWithMachine.
I hope this is helpful in some way.

I'm not sure how much I can do without a reproduction using only the core modules.

I agree. We need someone help to reproduce it more simply.

any ideas if we could have a problem with xstate module?

atomWithMachine is a bit complicated, so it may cause the issue.
However, if so, I'm pretty sure we can reproduce it without atomWithMachine.
The use of .onMount might be related.

alan-nf · 2022-06-27T19:53:34Z

Part of the problem is that we've all been discussing somewhat separate issues:

In my real (Vite) project, I'm having two separate problems:
- when files with atoms get HMR updated, my state gets reset. I don't know how to integrate jotai/babel/plugin-react-refresh with Vite so perhaps this is expected.
- Vite is always HMR updating my files with state and I don't know why as they aren't getting edited
@bstro is reproducing a react refresh bug with atomWithMachine

So put another way, the problems are:

What goes into a Vite hmr update is hard to debug
It's not clear how to integrate Vite + Jotai in a way that enables react-refresh in files that have atoms in them
There might be other bugs, e.g. with atomWithMachine

If you want a simple repro, here is one. This repro:

Uses Vite + Jotai (only atom / useAtom)
Has both the atom and UI in App.tsx. Updating App.tsx resets the counter.
jotai/babel/plugin-react-refresh is not configured. I don't know how to configure it with Vite

This is the same code but the atom is moved to a separate file which lessens the problem with refresh (editing App.tsx does NOT reset the state, but editing state.ts still does reset the state)

Thisen · 2022-06-27T20:17:09Z

Part of the problem is that we've all been discussing somewhat separate issues:

In my real (Vite) project, I'm having two separate problems:

when files with atoms get HMR updated, my state gets reset. I don't know how to integrate jotai/babel/plugin-react-refresh with Vite so perhaps this is expected.

Vite is always HMR updating my files with state and I don't know why as they aren't getting edited

@bstro is reproducing a react refresh bug with atomWithMachine

So put another way, the problems are:

What goes into a Vite hmr update is hard to debug

It's not clear how to integrate Vite + Jotai in a way that enables react-refresh in files that have atoms in them

There might be other bugs, e.g. with atomWithMachine

If you want a simple repro, here is one. This repro:

Uses Vite + Jotai (only atom / useAtom)

Has both the atom and UI in App.tsx. Updating App.tsx resets the counter.

jotai/babel/plugin-react-refresh is not configured. I don't know how to configure it with Vite

This is the same code but the atom is moved to a separate file which lessens the problem with refresh (editing App.tsx does NOT reset the state, but editing state.ts still does reset the state)

There's docs in Vite on how to configure babel plugins:
https://github.com/vitejs/vite/tree/main/packages/plugin-react#babel-configuration

Have you tried that?

alan-nf · 2022-06-27T20:43:31Z

If I try to add the babel plugin on stackblitz:

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['jotai/babel/plugin-react-refresh'],
      },
    }),
  ],
});

Error:

_babel_template.default is not a function

Error Details

[plugin:vite:react-babel] /home/projects/vitejs-vite-7ubsyk/src/main.tsx: _babel_template.default is not a function
/home/projects/vitejs-vite-7ubsyk/src/main.tsx
    at PluginPass.exit (file:///home/projects/vitejs-vite-7ubsyk/node_modules/jotai/esm/babel/plugin-react-refresh.mjs:56:57)
    at newFn (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/path/context.js:109:8)
    at TraversalContext.visitQueue (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitSingle (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/context.js:77:19)
    at TraversalContext.visit (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/context.js:131:19)
    at traverseNode (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at traverse (/home/projects/vitejs-vite-7ubsyk/node_modules/@babel/traverse/lib/index.js:62:34

If I try to do the same thing locally (repo on github), I get the error:

templateBuilder is not a function

Error Details

[vite:react-babel] /Users/anorbauer/src/jotai-vite-react-refresh/src/main.tsx: templateBuilder is not a function
file: /Users/anorbauer/src/jotai-vite-react-refresh/src/main.tsx
error during build:
TypeError: /Users/anorbauer/src/jotai-vite-react-refresh/src/main.tsx: templateBuilder is not a function
    at PluginPass.exit (file:///Users/anorbauer/src/jotai-vite-react-refresh/node_modules/jotai/esm/babel/plugin-react-refresh.mjs:41:34)
    at newFn (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/path/context.js:109:8)
    at TraversalContext.visitQueue (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitSingle (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/context.js:77:19)
    at TraversalContext.visit (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/context.js:131:19)
    at traverseNode (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at traverse (/Users/anorbauer/src/jotai-vite-react-refresh/node_modules/@babel/traverse/lib/index.js:62:34)

Thisen · 2022-06-27T21:08:09Z

If I try to add the babel plugin on stackblitz:
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['jotai/babel/plugin-react-refresh'],
      },
    }),
  ],
});
Error:

_babel_template.default is not a function

Error Details
If I try to do the same thing locally (repo on github), I get the error:

templateBuilder is not a function

Error Details

Duplicate of #1251.

alan-nf · 2022-06-28T05:12:03Z

Duplicate of #1251.

👍 I subscribed to that thread. When a fix is released I will see if there are any other blockers to getting Vite + Jotai + React Refresh playing nicely together and will report back here. Thanks!

Thisen · 2022-06-30T06:11:36Z

@alan-nf This is solved in 1.7.3 :)

alan-nf · 2022-06-30T06:13:44Z

@Thisen I saw. I proofed it in the Stackblitz sandbox and it works perfectly there. I froze the sandbox and renamed it if you want to use it as an example/demo of vite + jotai working with react refresh.

I have a note to myself to verify that this fixes things in my actual work project. I will report back as soon as I verify that.

Thank you so much for fixing this. Should be a huge productivity booster.

Thisen · 2022-06-30T06:26:29Z

Glad to hear that!

alan-nf · 2022-06-30T10:42:53Z

I'm seeing one more hiccup but I think it's to be expected. After a hot update, the atom update methods (result of useUpdateAtom) is a new function which triggers some of my useEffects in a cascading way. That's definitely to be expected and I just need to work around that, right?

Otherwise, this works great!

dai-shi · 2022-06-30T13:58:32Z

the atom update methods (result of useUpdateAtom) is a new function

Hm, not exactly sure, but if the atom reference is the same, the function should be the same. Can you create a minimal reproduction with codesandbox?

alan-nf · 2022-07-01T19:08:18Z

but if the atom reference is the same, the function should be the same. Can you create a minimal reproduction with codesandbox?

Is stackblitz okay? if so, here you go: https://stackblitz.com/edit/jotai-vite-react-refresh-fretjv?file=src%2FApp.tsx

Note that the atom reference is also changing as part of the hmr.

I don't think this is a bug. In the stackblitz repro I demonstrate that it happens with setState as well (both the state and updater are new references). If you act on such changes you just have to be aware that the references might update in an hmr. I think that assuming otherwise is probably a sign of bad code anyway?

dai-shi · 2022-07-02T01:44:03Z

Thanks.

https://stackblitz.com/edit/jotai-vite-react-refresh-fretjv?file=src%2FApp.tsx

"The updateInlineCount function was updated 12 times"
"The inlineCountAtom atom was updated 12 times"
"The useState updater was updated 12 times"

Yeah, looks like working perfectly.

Thisen self-assigned this May 11, 2022

alan-nf closed this as completed May 11, 2022

This was referenced Jun 2, 2022

Problems with React Fast Refresh #1025

Closed

docs(fast refresh): introduce dx issue #1203

Closed

dai-shi reopened this Jun 3, 2022

Thisen closed this as completed Jun 30, 2022

bstro mentioned this issue Jul 13, 2022

atomWithMachine: fast refresh state update issue #1278

Closed

Adam13531 mentioned this issue Jun 3, 2023

State resets upon fast-refreshing pmndrs/swc-jotai#14

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

State resets with React Fast Refresh #1150

State resets with React Fast Refresh #1150

alan-nf commented May 10, 2022 •

edited

Loading

dai-shi commented May 11, 2022

Thisen commented May 11, 2022

Thisen commented May 11, 2022

alan-nf commented May 11, 2022

alan-nf commented May 11, 2022

alan-nf commented May 11, 2022 •

edited

Loading

alan-nf commented May 11, 2022

dai-shi commented Jun 3, 2022

Thisen commented Jun 7, 2022

alan-nf commented Jun 13, 2022 •

edited

Loading

bstro commented Jun 15, 2022 •

edited

Loading

Thisen commented Jun 20, 2022

Thisen commented Jun 20, 2022

Thisen commented Jun 21, 2022

bstro commented Jun 22, 2022

Thisen commented Jun 23, 2022

bstro commented Jun 26, 2022 •

edited

Loading

Thisen commented Jun 27, 2022

dai-shi commented Jun 27, 2022

alan-nf commented Jun 27, 2022 •

edited

Loading

Thisen commented Jun 27, 2022

alan-nf commented Jun 27, 2022

Thisen commented Jun 27, 2022

alan-nf commented Jun 28, 2022

Thisen commented Jun 30, 2022

alan-nf commented Jun 30, 2022

Thisen commented Jun 30, 2022

alan-nf commented Jun 30, 2022 •

edited

Loading

dai-shi commented Jun 30, 2022

alan-nf commented Jul 1, 2022 •

edited

Loading

dai-shi commented Jul 2, 2022

State resets with React Fast Refresh #1150

State resets with React Fast Refresh #1150

Comments

alan-nf commented May 10, 2022 • edited Loading

dai-shi commented May 11, 2022

Thisen commented May 11, 2022

Thisen commented May 11, 2022

alan-nf commented May 11, 2022

alan-nf commented May 11, 2022

alan-nf commented May 11, 2022 • edited Loading

alan-nf commented May 11, 2022

dai-shi commented Jun 3, 2022

Thisen commented Jun 7, 2022

alan-nf commented Jun 13, 2022 • edited Loading

bstro commented Jun 15, 2022 • edited Loading

Thisen commented Jun 20, 2022

Thisen commented Jun 20, 2022

Thisen commented Jun 21, 2022

bstro commented Jun 22, 2022

Thisen commented Jun 23, 2022

bstro commented Jun 26, 2022 • edited Loading

Thisen commented Jun 27, 2022

dai-shi commented Jun 27, 2022

alan-nf commented Jun 27, 2022 • edited Loading

Thisen commented Jun 27, 2022

alan-nf commented Jun 27, 2022

Thisen commented Jun 27, 2022

alan-nf commented Jun 28, 2022

Thisen commented Jun 30, 2022

alan-nf commented Jun 30, 2022

Thisen commented Jun 30, 2022

alan-nf commented Jun 30, 2022 • edited Loading

dai-shi commented Jun 30, 2022

alan-nf commented Jul 1, 2022 • edited Loading

dai-shi commented Jul 2, 2022

alan-nf commented May 10, 2022 •

edited

Loading

alan-nf commented May 11, 2022 •

edited

Loading

alan-nf commented Jun 13, 2022 •

edited

Loading

bstro commented Jun 15, 2022 •

edited

Loading

bstro commented Jun 26, 2022 •

edited

Loading

alan-nf commented Jun 27, 2022 •

edited

Loading

alan-nf commented Jun 30, 2022 •

edited

Loading

alan-nf commented Jul 1, 2022 •

edited

Loading