Skip to content
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

Bug: After some time useSyncExternalStore stops reacting on store updates #27891

Closed
retueZe opened this issue Jan 8, 2024 · 3 comments
Closed
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@retueZe
Copy link

retueZe commented Jan 8, 2024

I'm using React+Redux, as everyone else. Initially, I assumed it's a react-redux problem, but this bug is only reproduced on versions 8.x and 9.x of react-redux, where useSyncExternalStore was added, and react-redux team suggested me to ask you about this. The issue:

The UI is working perfectly fine, but after a while it just stops receiving store updates. The Redux DevTools shows that the action was successfully dispatched, but no re-renders are triggered by that. We have a setState bound to a blur event on the root component, and when I move my cursor over DevTools, causing blur event, the UI re-renders. Any change in store do not trigger re-render. It is a rare bug, happens after user spends some time on the site without reloads. One of the code examples:

const { selectedItemId } = useSelector(getComponentProps);
const getComponentProps = createStructuredSelector({ selectedItemId: (state) => state.path.to.selectedItemId })

Looks like the problem is in forceUpdate somewhere inside the codebase, but I don't really know.

React version: 18.2.0 (react-redux@8.1.3 or @9.0.4, redux@4.1.8, and as a dependency of react-redux, the actual use-sync-external-store@1.2.0 is installed)
There are no clear steps to reproduce, just don't reload the page and after a while it happens.

I tried to figure out the problem by myself, but the flow inside useSyncExternalStore is just too complex. I'm not the first one who faced this issue (on react-redux repo: 2060, 1981). There are also a couple of demos: 1, 2.

I'm not sure if this information will be helpful, but we can only catch this bug on production (i.e., NODE_ENV === 'production'). Maybe this helps.

@retueZe retueZe added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jan 8, 2024
@retueZe
Copy link
Author

retueZe commented Jan 19, 2024

To be honest, I'm disappointed in this. In the end of the day, we were forced to roll back to react-redux@7 just to avoid facing this bug. I got 0 attention for this critical issue, and I'm not the first one facing it. Hope in one of the future releases it will be fixed, but until then, I have to use the old version.

Copy link

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 18, 2024
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

1 participant