Comparing this.props.prop and nextProps.prop with mobx - reactjs

Question

Is there any way to do something like this with mobx?
componentWillUpdate(nextProps) {
if (this.props.prop !== nextProps.prop) {
/* side effect, ex. router transition */
}
}
From my experience, this.props.prop is always equal to nextProps.prop even in componentWill- hooks...
UPD Here is more specific use case — simple login scenario:
Store
class AppStore {
#observable viewer = new ViewerStore();
}
class ViewerStore {
#observable id;
#observable name;
#observable error;
fromJSON(json = {}) {
this.id = json.id;
this.name = json.name;
}
clearError() {
this.error = null;
}
login({ email, password }) {
fetch('/login', {
method: 'POST',
body: JSON.stringify({
email,
password
}),
credentials: 'same-origin'
})
.then(json => {
this.fromJSON(json);
})
.catch(({ error }) => {
this.error = error;
})
}
}
React part
class LogInPage extends Component {
componentWillUpdate(nextProps) {
if (nextProps.viewer.id && !this.props.viewer.id) {
this.props.viewer.clearError();
this.props.onSuccess();
}
}
login = e => {
e.preventDefault();
this.props.viewer.login({
email: e.target.elements['email'].value,
password: e.target.elements['password'].value,
});
}
render() {
return (
<div>
<h1>Log In</h1>
<form onSuccess={this.login}>
<input type="text" name="email" />
<input type="password" name="password" />
<input type="submit" />
</form>
{ this.props.viewer.error && (
<div>
<b>Error</b>: {this.props.viewer.error}
</div>
)}
</div>
);
}
}
const store = new AppStore();
ReactDOM.render(<LogInPage
viewer={store.viewer}
onSuccess={() => alert("Hello!")}
/>
, container);
So basically, I just want to be able to do something when viewer id switches from undefined to something

Answer 1

Thanks for the update, that clarifies the question a lot. It depends a bit on what you want to do, but if you want to change the rendering of your component, it is enough to decorate your component with #observer from the mobx-react package. It will then automatically re-render when the store changes.
If you want do any additional actions, you can setup an autorun in your componentWillMount. Like
componentWillMount() {
this.autorunDisposer = mobx.autorun(() => {
if (nextProps.viewer.id && !this.props.viewer.id) {
this.props.viewer.clearError();
this.props.onSuccess();
}
})
}
But I don't see this pattern very often, as often it is cleaner to have this kind of logic just in your store. Personally I would expect a login form component to rougly look like this:
#observer class RequiresLogin extends Component {
render() {
if (this.props.viewerStore.id !== undefined) {
return this.props.children
} else {
return <LoginPage viewer={this.props.viewerStore}/>
}
}
}
#observer class MyTestPage extends Component {
render() {
return <RequiresLogin viewer={this.props.viewerStore}>
Secret Area!
</RequiresLogin>
}
}
#observer class LogInPage extends Component {
login = e => {
e.preventDefault();
this.props.viewer.login({
// tip: use React refs or the onChange handler to update local state:
email: e.target.elements['email'].value,
password: e.target.elements['password'].value,
});
}
render() {
if (this.props.viewer.id)
return null; // no need to show login form
return (
<div>
<h1>Log In</h1>
<form onSuccess={this.login}>
<input type="text" name="email" />
<input type="password" name="password" />
<input type="submit" />
</form>
{ this.props.viewer.error && (
<div>
<b>Error</b>: {this.props.viewer.error}
</div>
)}
</div>
);
}
}

Answer 2

In 99,9% of cases, this happens because somewhere else in your code props are mutated directly. And this is not allowed in react.
Typical scenario's include:
var myObject = this.props.someObject; // myObject is a POINTER to props, not copy
myObject.attribute = newAttribute; // Now props are directly mutated
var myArray = this.props.someArray;
myArray.splice(a,b); // splice directly mutates array
To solve, make a proper copy of the props object before you update the prop.

Answer 3

Well, actually the problem happened because I passed a mobx store as the single prop (in order to call it's methods like this.props.store.update()), so even though when something changes in store, component is updated by mobx, nextProps still holds the same reference to that store.
I finally ended up with destructuring store into component's props, when I need this kind of check.