score:2

Accepted answer

You are right in that you need to use componentDidUpdate to do custom logic when the component has been re-rendered with MobX. The observable values will be synchronously updated, but the component will be re-rendered asynchronously as usual.

Example (JSBin)

@observer 
class App extends Component {
  @observable value = ''

  componentDidMount() {
    setTimeout(() => this.value = 'focus', 1000);
  }

  componentDidUpdate() {
    this.ref.focus();
  }

  render() {
    return (
      <input
        ref={ref => this.ref = ref}
        value={this.value}
        onChange={e => this.value = e.target.value}
      />
    );
  }
};

Related Query

More Query from same tag