useSelector returns stale value in parent component if child class component dispatches action updating that value during life cycle functions

[tianenli]

What is the current behavior?

This is related/displaying similar behavior to #1599.

In this example, our parent component consumes a value from the store, and a child component on componentDidMount and componentDidUpdate calls an action to update that value multiple times. We see the child component receives the updated value, while the parent component does not after the first update. The parent component's useSelector instance doesn't invoke the selector function and just returns the cached value.

https://codesandbox.io/s/race-condition-x1h1d

import React from "react";
import { incrementAction } from "./actions";
import { connect, useSelector } from "react-redux";

const countersSelector = state => {
  console.log("RUNNING SELECTOR", state.counters);
  return state.counters;
};

class ChildBase extends React.Component {
  componentDidMount() {
    if (this.props.counter < 3) {
      this.props.increment();
    }
  }

  componentDidUpdate() {
    if (this.props.counter < 3) {
      this.props.increment();
    }
  }

  render() {
    return <div>Child: {this.props.counter}</div>;
  }
}

const mapStateToProps = state => ({
  counter: state.counters.counter
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(incrementAction())
});

const Child = connect(
  mapStateToProps,
  mapDispatchToProps
)(ChildBase);

function App(props) {
  console.log("App CALLING USESELECTOR");
  const counters = useSelector(countersSelector);
  console.log(counters);

  return (
    <div className="App">
      <div>App: {counters.counter}</div>
      <Child />
    </div>
  );
}

export default App;

What is the expected behavior?

We would expect the parent component's useSelector instance to return the same value from the store as the child component's

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?

The versions used in the code sandbox are:
react: 16.13.1
react-dom: 16.8.3
react-redux: 7.1.3
redux: 4.0.5

[timdorr]

This is basically a duplicate of #1510, but between useSelector and connect If you delay the dispatches with a setTimeout, the problem also goes away.

[markerikson]

I'm going to close this as a WONTFIX for now, largely because we're encouraging folks to stop using connect (even though it'll be fully supported in v8). This is a real bit of behavior that I can understand is annoying, but I don't think there's a meaningful change we can make at this point, and I don't intend to spend time fixing it myself.

If someone still feels strongly about this please comment, or even better file a PR to improve behavior here.