"useAsObservableSource" causes react warning "Cannot update during an existing state transition"

[Zhifeng Li]

@observer
class Comp extends React.Component {
  render() {
    return <div>{this.props.p.x}</div>;
  }
}

function Wrapper(props) {
  const p = useAsObservableSource(props);
  // In this case, `Comp` has to be a class component;
  // A functional `Comp` may also cause similar (not exactly identical) render warning in higher versions of `react` and `mobx`.
  return <Comp p={p} />;
}

function App() {
  const [x, setX] = React.useState(0);
  useEffect(() => {
    setX(1);
  }, []);
  return <Wrapper x={x} />;
}

Intended outcome

no error, no warning.

Actual outcome

console error:

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

How to reproduce the issue

https://codesandbox.io/s/minimal-mobx-react-project-ve187?file=/index.js

To click the refresh button below while warning is flushed by host.

Versions

• mobx-react: 6.2.2
• react: 16.8.6
• mobx: 4.15.4

[Daniel K.]

Thanks for the report, duplicate to https://github.com/mobxjs/mobx-react-lite/issues/274