useSelector returning out-of-date result

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.

[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.

[markerikson]

Yep.

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