title: Mobx and React. How to handle focus input after observable change?
body: <p>with React state it was easy to set new value which was condition for render some input and then focus to that input with state callback.</p>
  
  <pre><code>handleToggleInput() {
    const showInput = !this.state.showInput
    this.setState({ showInput }, () =&gt; showInput &amp;&amp; this.refs.input.focus())
  }
  
  render() {
    if(this.state.showInput) {
      &lt;input ref="input" type="text /&gt;
    }
  }
  </code></pre>
  
  <p>Now when switching to Mobx it is not possible</p>
  
  <pre><code>@observable showInput = false;
  
  handleToggleInput() {
    this.showInput = !this.showInput
    this.showInput &amp;&amp; this.refs.input.focus()
  }
  
  render() {
    if(this.showInput) {
      &lt;input ref="input" type="text /&gt;
    }
  }
  </code></pre>
  
  <p>This will fail, because React did not yet rerender component with input.
  Is there any way how wait and detect when rerender is done?</p>