I wouldn't call it an anti-pattern, but it defeats one of my favorite aspects of MobX. When using MobX, you are only ever dealing with props. I like this, because I never have to worry about whether a property lives in props or state. Since I started using MobX, I have never had a situation where I needed "state" local to a component. I find it best to keep all app state in stores, pass that state into top level components as props...
However, if you needed to have a "stateful" component using MobX, you could do something like this.
import React, { Component } from 'react';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
@observer
export default class User extends Component {
@observable user = {
firstName: 'john',
lastName: 'lennon',
status: 'alive'
};
@action updateUserStatus(newStatus) {
this.user.status = newStatus
}
render() {
const { firstName, lastName, status } = this;
return (
<p>{firstName} {lastName} - {status}</p>
);
}
}
MobX
, but I had a modal dialog component which needed to be a stateful component, so I managed that specific component's state withsetState()
because it seemed unnecessary to useMobX
there ( but I might as well could have )