-
-
Notifications
You must be signed in to change notification settings - Fork 190
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useStoreState doesn't react to changes in the state after Fast Refresh in React Native #477
Comments
Hi @shancial Thanks for this report. I can empathise with that pain. I'll def make some time to look into this for you. |
Thanks! I can provide you with the test project code that I tested this with, but I basically used the official guide ( |
same issue. |
It seems like Fast Refresh / react-refresh is also coming to create-react-app in the future. |
Can also confirm this is happening to me as well. Anything I can do that would help with getting this looked into? :) |
Hi all, I want to look into this. Are you all running the Expo CLI, and RN Web? |
I am using the standard react-native CLI and React Native. |
Next.js and CRA. Both are also facing this issue. You can find a small reproduction repo based on CRA here. It's stripped down to only containing a counter and a button for incrementing the counter. Changing the component makes the counter stop updating when clicking the button. According to the Redux DevTools the store state keeps updating on click. Changing the store logic (like changing the incrementing value) makes the refresh break completely. No changes on the component are reflected on the website anymore. Instead the counter keeps updating on every click, unfortunately it updates based on the old incrementing value. |
I confirm the same as @rfermann issue is happening with nextjs. |
I just ran into this too building an app that uses Fast Refresh, but for the web, and not with React Native. Edit: After an HMR update, the actions are definitely continue to fire based on adding console.debug statements to the function. It seems like the type of state update may be involved. If I push onto an array even after a hot update, the state continues to update fine and components on screen will refresh as expected. However, if I modify the array with a splice to delete an item, then the components do not refresh (yet the change is applied to the state because I am using localStorage persistence). Edit 2: I also see that performing an behavior (i.e. button click) which modifies local state with a |
We're also starting to see the issue of fast refresh not working properly with easy-peasy. I've reproduced the issue in this codesandbox: Any ideas as to what is causing this @ctrlplusb ? |
Fixed in v5.1.0 🎉 |
Hi,
I added easy-peasy(v.3.3.0) successfully into a new React Native(v0.62.2) project but noticed that a function component using useStoreState will not react to the state after editing the component code. My button will send a request, receive a new picture of a dog and set that dog into the state but my component will not detect the state change. I have React Native's Fast Reload enabled.
Here is my test component (TestComponent.tsx):
Fast Refresh documentation points out that it'll try to preserve the state if a change is done to a file that only exports a React component:
If I change the order of the useStoreState and useStoreActions, the useStoreState hook will work until I make a modification that makes Fast Refresh try to preserve values of useStates and useRefs. Putting
// @refresh reset
somewhere in the file also works but it forces the component to re-render on every save. Disabling Fast Refresh works as well but it makes the developer experience really bad.Maybe the bug is related to the useRef hooks used in the useStoreState? I checked the code but I'm afraid I don't know enough about hooks/redux/easy-peasy yet to fix it myself.
Is there anyone that can look into this?
The text was updated successfully, but these errors were encountered: