After some time useSelector stops doing re-renders

[retueZe]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.2.0
• ReactDOM: 18.2.0
• Redux: 4.0.1 (was too painful to update up to 5)
• React Redux: 9.04 (downgraded to 8.1.3, didn't help)
• Reselect: 5.0.1 (downgraded to 4.1.8, didn't help)

What is the current behavior?

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.

I consider react-redux to be the root cause because my debugger says so (my breakpoint on the selector fires only when I move my mouse out, and when I press buttons causing store changes, it does nothing). 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.

What is the expected behavior?

The site is not going to freeze after some time, and all the store changes are received by the UI.

Which browser and OS are affected by this issue?

Windows, Google Chrome

Did this work in previous versions of React Redux?

• Yes

[retueZe]

Wait, why use-sync-external-store@1.0.0 is used as a dependency in react-redux@9.0.4? why not 1.2.0? And why don't just use React's built-in, as you wrote in your article?

[EskiMojo14]

^1.0.0 means you should get 1.2.0, that's how semantic versioning works.

as for why it's used rather than the built-in, it's because React Redux uses useSyncExternalStoreWithSelector which is still not built into React.

[retueZe]

@EskiMojo14 Ah, I missed that. I'm also confused with that, because it doesn't reduce the bundle size at all, and looks like it may result in using a buggy package (#2060 #1981). Hope the state of this issue won't get stale like the state of the redux store in my and the mentioned issues.

[markerikson]

Can you provide an example project that reproduces the issue, or record and share a Replay ( https://replay.io/record-bugs ) ? I can't immediately think of anything likely to be related here, and the description doesn't give much detail for us to investigate. useSyncExternalStore is built into React, so we just rely on that.

[retueZe]

@markerikson Suddenly, this one happen occasionally, but it cannot be considered as "rare". I caught the bug only once, but I missed that opportinuty in a dump way: I entered another module, and since we can only re-render by setting some state, I could not get back to my original module with the blur event to test it properly. I already wrote our other developers to be aware of this issue, and if it occurs, not reload the page and connect on that. When it happens, I, of course, will send here a replay.

I think that the issue is in that package because:

1. Was pointed out by other people
2. It really is the change that might've caused it, because I compared 7.2.7, 8.1.3, and 9.0.4, and it looks like the root cause candidate

[markerikson]

I'm not sure what you're pointing to as the "root cause". Can you clarify? Does it also occur with v7.x?

[retueZe]

@markerikson The thing is that in in 7.x (at least in 7.2.7) use-sync-external-store is not being used at all. Instead, there was a counter forcing re-renders. This bug started occuring after we switched to one of the newer versions. "Root cause" is just what simply caused the bug and what needs to be fixed.

Replays:

1. https://www.loom.com/share/89b5849a9f054933b439c902ba2fcfd6?sid=90fca031-a1d3-44e8-828a-deb5c75f13a3 (the main part is in the beggining, where the store state changes only after setState (i.e. 'blur' event being fired))
2. https://www.loom.com/share/ac1594bc24144d4287518fd922ac2c90?sid=b70b64d4-4a6b-4717-8238-7fc4f2bb7dad (all the state that is not updating is store state)

[markerikson]

@retueZe that's actually exactly my point.

If it occurs in 7, 8, and 9, then it's most likely a bug with React-Redux.

If it occurs with 8 and 9, but not 7, then it's most likely a bug with React itself (and thus the "root cause" is in React, and an issue should be filed over there instead).

I'm afraid videos aren't going to really help here - either way this really needs some kind of a reproduction project that can be investigated, or an actual Replay recording ( https://replay.io/record-bugs , which captures the actual app execution ).