MobX componentWillReact not firing - reactjs

Question

I read in the docs that mobx react provides a new lifecycle called componentWillReact. However, it seems that my class only reacts to mobx changes in the render function. componentWillReact is never triggered when my store changes.
I am sending "next" down as a prop. This app does not make use of mobx inject.
import { observer } from 'mobx-react';
#observer class QuickShopNew extends Component {
componentWillReact() {
console.log(this.props.store.next);
}
render(){
//console.log(this.props.store.next);
return(
<div>
</div>
)
}
}

Answer 1

As I can see your component doesn't dereference observed property in the render method. That's why mobx doesn't know that component should be rerendered and componentWillReact should be called on value change.
You can read how observer component work here
And here is simple working example on codepen
const { Component, PropTypes } = React;
const { observable } = mobx;
const { observer } = mobxReact;
// Store for state
class Store {
#observable next = 0;
increaseNext = () => this.next +=1;
}
let store = new Store();
#observer
class MyComponent extends Component {
componentWillReact() {
console.log(this.props.store.next);
}
render() {
return (
<div>
<h1>{this.props.store.next}</h1>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<MyComponent
store={store}
/>
<button onClick={store.increaseNext}>
Increase
</button>
</div>
);
}
}
// Insert into container
ReactDOM.render(<App />, document.getElementById('app'));

Answer 2

I think that you should avoid of using the "componentWillReact" and use just standart Mobx services like this example is showing :
If you intended to update the observable variable with action then use computed method to send updated value into UI.
import React from 'react';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';
class AppStore {
#observable next = 0;
#action updateNext = () => this.next = this.next + 1;
#computed get UI_renderValueNext() {
return this.next ? this.next : 0;
}
}
const appStore = new AppStore();
#observer
class AppComponent extends React.Component {
render(){
return (
<div>
<div>
{this.props.UI_rennderNext}
</div>
<button onClick={this.props.updateNext}>Click ME</button>
</div>
)
}
}
ReactDOM.render(
<AppComponent />, document.getElementById('root')
)