useSelector returning out-of-date result

[hednowley]

What is the current behavior?

See this sandbox.

After deleting an entry, useSelector in the ListHook component returns an out-of-date result including the ID of the deleted entry. This leads to an Item calling useSelector for the missing item (this is logged to the console). It looks to me like it might be because the selector is run inside an effect hook.

The ListClass component uses the old connect approach and doesn't have the same issue.

What is the expected behavior?

The behaviour of the hook has caused some issues while migrating an app where selectors currently throw exceptions. I understand the hook isn't meant to be a drop-in replacement for the old approach but I'm interested to see if there is a way to avoid this while still using hooks.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

react 16.8.6
react-dom 16.8.6
react-redux 7.1.0
redux 4.0.1

Issue exists in all 7.1.0 alphas and RC.

[timdorr]

This is exactly the "zombie child" problem: https://react-redux.js.org/api/hooks#stale-props-and-zombie-children It's a known deficiency of the Hooks pattern that isn't possible to solve. For these kinds of components, you should stick to connect.

[markerikson]

Yep.

Also, as an unrelated side note, you really shouldn't be putting mutable ES6 Map instances into the state.

[hednowley]

D'oh, I should have read that first. Thank you for the help!

[markerikson]

Sure.

You might want to try out our new Redux Starter Kit package, which will warn you by default about putting non-serializable values into the store state (as well as throwing errors when you mutate).

[hednowley]

I will check the package out, thank you.

FYI I noticed that in my sandbox example the staleness exceptions are caught by react-redux (by design) but that they aren't in my real-world application. I was able to reproduce my real-world issue by adding a wrapping component to a new sandbox and noticed something interesting: the staleness error is thrown by the selector on 7.1.0 but not on 7.1.0-alpha4. It looks like this is caused by this optimisation change.

Just mentioning in case this is an opportunity to mitigate some "zombie child" issues.

[louiszawadzki]

I have the same issue when running tests, using react-native 0.60.3, redux 4.0.4, react-redux 7.1.0, jest 24.0.0, react-test-renderer 16.8.6

When I dispatch two actions in a row the second one isn't changing anything in my selectors - only when I run my tests, it works fine in the app.

I applied a patch to revert #1273 and now it works.