easy-peasy no longer working properly with Fast Refresh

[jmyrland]

Fast refresh is not working properly with easy-peasy. I've reproduced the issue in this codesandbox:

I'm not sure what caused this, as it has been working properly previously.

Current versions:

• easy-peasy@5.0.4
• react@17.0.2
• react-scripts@4.0.3
• react-refresh@0.11.0

One workaround, is to use a // @refresh reset comment - but this is quite tedious.

Maybe related to this issue as well: #477

[ctrlplusb]

Thanks for the report. I'm utilising Easy Peasy again, also across React Native which might interest some. :)

I'm gonna take a look at this DX again.

[ctrlplusb]

Definitely some strangeness going on. I can't see what or why, but there is some possibly related discussion with this issue.

[jmyrland]

Definitely some strangeness going on. I can't see what or why, but there is some possibly related discussion with this issue.

Absolutely. It used to work fine before (with CRA), but at some point it stopped working. I'm not exactly sure when or what caused this.

I'll try to go through our git history to pinpoint when it stopped working. We continually update dependencies, so an unrelated dependency update might be the culprit.

Let me know if there is anything I can do to help out the debugging process 👍

[no-stack-dub-sack]

I've been experiencing this same issue as well.

@ctrlplusb @jmyrland fwiw, I tried using the provided codesandbox above and bumping the versions down the to versions found in the linked CRA issue (react, react-dom, and react-scripts) and it still does not seem to work: https://codesandbox.io/s/xenodochial-darkness-ci11b5?file=/src/Counter.tsx

[jmyrland]

I've been experiencing this same issue as well.

@ctrlplusb @jmyrland fwiw, I tried using the provided codesandbox above and bumping the versions down the to versions found in the linked CRA issue (react, react-dom, and react-scripts) and it still does not seem to work: https://codesandbox.io/s/xenodochial-darkness-ci11b5?file=/src/Counter.tsx

My guess is, that this issue is caused by some peer dependency upgrade related to these packages. I'll try (as soon as I get some spare time) to go backwards through our revisions to see when this stopped working.

[jmyrland]

I've tried going back through all dependency updates (1 year back) in our repository, but the issue still persists. I know that this has not been an issue for this long, so I'm out of ideas as to what is causing this issue.

Let me know if there is anything else I can assist with, to get this issue fixed.

[jmyrland]

Definitely some strangeness going on. I can't see what or why, but there is some possibly related discussion with this issue.

If I disable FAST_REFRESH, hot reloading kicks in. The side-effect of this, is that the whole page rerenders.

Ideally, I'd like to enable fash-refresh, which only updates the component with the related change.

fast-refresh is working fine with pure React components.

When a component utilizes easy-peasy, the state updates are seemingly working fine, until a change is made to the component file. After a change, all the state is "delayed/pooled up" - which indicates that actions are working properly, but the state changes are not returned by useStoreState. Once the file has been changed, the "delayed state changes" is applied - but the issue still persists until another change is made to the component file. This issue is illustrated in the GIF in the issue description.

It seems that after a fast refresh of a component, the easy-peasy state is temporarily detached from the component - until the file is changed again, as state is fed into the component again, but only once after the update.

[joshcawthorne]

+1 to this issue, I'm seeing the issue in NextJS 12.1 with hot reload.

[jmyrland]

We've migrated from CRA to vite with @vitejs/plugin-react.

The issue still persists, because the plugin is configured with react-refresh.

After editing Component.tsx, actions are working properly & modifying state - but the component is not re-rendered after the action is executed (when the state is changed).

Update: If I add // @refresh reset inside the Component.tsx - everything is working as expected. 🤔

[X-Tender]

Hi, did some have any updates on problem? I also experienced it on NextJS and it took me some hours to find this issue 😄

[jmyrland]

Hi, did some have any updates on problem? I also experienced it on NextJS and it took me some hours to find this issue 😄

Sorry, there is no fix for this at the moment. The only solution we've found is to use the "refresh reset" comment specified above.

[no-stack-dub-sack]

@jmyrland this is a more general question that I may just open a separate issue for, but do you know if the community can expect any support or active maintenance of this project moving forward? It seems as if the core maintainer has gone dark for a while and issues are beginning to pile up. I completely understand how difficult it can be to maintain an OSS project but just looking to manage some expectations here. The build I have is currently working well in most scenarios but I have some open issues here that I'd love some insight on.

Thanks.

[jmyrland]

@jmyrland this is a more general question that I may just open a separate issue for, but do you know if the community can expect any support or active maintenance of this project moving forward? It seems as if the core maintainer has gone dark for a while and issues are beginning to pile up. I completely understand how difficult it can be to maintain an OSS project but just looking to manage some expectations here. The build I have is currently working well in most scenarios but I have some open issues here that I'd love some insight on.

Thanks.

I can't speak for @ctrlplusb and his commitment to this project.

But I've got nothing but postitive feedback in regards to his work on this project. Previously, he has gone out of his way to provide patches to previous bugs & highly requested features, and it has been the most responsive OSS experience I've had.

I find that this project is quite stable despite the recent lack of activity. We use it quite extensively in our production code and have yet to find any critical issues with easy-peasy. I've only got this issue, which is just a DX-improvement if there is a solution for it.

[no-stack-dub-sack]

@jmyrland That's great to hear, thanks for your reply. I saw you were labeled a contributor so figured you might have some insight. Glad to hear you're using in production code and find it reliable, however. Given that, is there any chance you can comment on #732 and whether or not you've experienced this issue and whether this is expected behavior?

[ctrlplusb]

It appears to be working for me in the latest alpha, which brings support for React 18;

#740 (comment)

Could ya'll please test.

[jmyrland]

It appears to be working for me in the latest alpha, which brings support for React 18;

#740 (comment)

Could ya'll please test.

Sweet! Will test it first thing tomorrow 👍

[jmyrland]

@ctrlplusb easy-peasy@5.1.0-alpha.3 is working great! 🎉 Here is the updated sandbox.

The sandbox uses react-scripts, but I've also tested it with react with vite & @vitejs/plugin-react.

~1400 unit testst still passing 👍

[jmyrland]

May also fix #713 & #477

[ctrlplusb]

Fixed in v5.1.0 🎉