Connected component is rendered with stale state

[ckedar]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Under certain circumstances, a connected component is rendered with stale state.

One such case occurs when you have a stateful Child in a Container, both of them connected and child mutates both store and local state at the same time.

steps to reproduce

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { connect, Provider } from "react-redux";

function counter(state = 0, action) {
  return action.type === "INCR" ? state + 1 : state;
}
const store = createStore(counter);

let Child = ({ state, dispatch }) => {
  console.log("Child.render. state =", state, " store.getState() =", store.getState());
  if (state !== store.getState()) {
    window.alert(`Got stale state ${state} !== ${store.getState()}`);
  }
  const [, setLocalState] = React.useState(0);
  const incrHandler = () => {
    setLocalState(localState => localState + 1);
    dispatch({ type: "INCR" });
  };
  return (
    <div>
      Child = {state}
      <button onClick={incrHandler}>Incr</button>
    </div>
  );
};
Child = connect(state => {
  console.log("Child. mapStateToProps");
  return { state };
})(Child);

let Container = ({ state }) => {
  console.log("Container.render. state =", state);
  return (
    <div>
      Container = {state}
      <Child />
    </div>
  );
};
Container = connect(state => ({ state }))(Container);

function App() {
  return (
    <Provider store={store}>
      <Container />
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/suspicious-merkle-0kzcg

What is the expected behavior?

• Component should never be rendered with stale state.
• Also, on state and store mutation, the component should be rendered only once.

**Versions **

  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-redux": "7.1.1",
    "redux": "4.0.4"
  },

[timdorr]

Duplicate of #1298

[timdorr]

BTW, the workaround for now is to set your component to non-pure mode:

Child = connect(state => {
  console.log("Child. mapStateToProps");
  return { state };
}, null, null, {pure: false})(Child);