Stale values in `useSelector` closure

[zimmru]

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

• React: 18.2
• React Redux: 8.x (I'm able to reproduce this issue in all versions I've tried: 8.0.0, 8.0.5, and 8.1.2)

What is the current behavior?

I'm updating a project from react-redux 7.x to 8.x, and I think I'm running into a bug. I'm seeing a call to useSelector with stale captured values. Here's a simplified project that demonstrates the issue: https://codesandbox.io/s/react-redux-8-closure-w8zqf4?file=/src/App.js

When the "Dispatch" button is clicked, the first useSelector is called 5 times. All calls are expected except the third. The additional call would be fine except the captured variable now has reverted back to its original value for that call--the second time it was called, it had already been updated. Note: if you open the console, you'll see a message about "captured stale data" that identifies the bad call to useSelector. In react-redux 7.x, this additional call isn't made.

What is the expected behavior?

Here's the exact same code with version 7.2.9 of react-redux: https://codesandbox.io/s/react-redux-7-closure-4lq8ph?file=/src/App.js

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

• Yes

[a02418wang]

This class of issues likely exists across all versions of react-redux. Fundamentally, react-redux relies on useLayoutEffect to update various refs, but there is an unavoidable timing gap between the render phase and the execution of useLayoutEffect. If checkForUpdates is triggered during this gap, it will read outdated refs.
This can cause problems in at least two scenarios, one of which I’ve personally encountered:

In connect, checkForUpdates uses lastWrapperProps. During render, React passes the latest props to childPropsSelector, which caches them internally. However, if an event triggers checkForUpdates before useLayoutEffect runs, it will pass the outdated lastWrapperProps to childPropsSelector. This not only causes unnecessary updates but also overwrites the internal props cache. As a result, subsequent events may cause the component to oscillate between old and new values. From the trace, it appears that React sometimes also invokes an outdated actualChildPropsSelector, passing in stale wrapperProps.
My local fix for this was to avoid passing lastWrapperProps into childPropsSelector within checkForUpdates. Instead, I passed a sentinel value, allowing childPropsSelector to fall back to its internal cached props as the latest source of truth.

The second case is the one raised in this issue: useSelector may use a stale latestSelector (as seen in the 7.x implementation). I believe the same issue exists in 7.x and 8.x alike. In 8.x, the relevant logic is encapsulated within useSyncExternalStoreWithSelector, but the nature of the problem probably remains the same.