title: React Mobx componentDidUpdate is not updating when observable changes
body: <p>I'm new to Mobx and reactjs in general, I have knowledge in Redux and react native, and in Redux when I used to call an action and the props get updated, the <code>componentDidUpdate</code> life cycle method is triggered.</p>
  
  <p>The scenario I'm having now is login. so the user fills the form, clicks submit, and the submit calls a Mobx action (asynchronous), and when the server responds, an observable is updated, and then it navigates to a main page (navigation happens in the component).</p>
  
  <p>Here is my store code.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import { autorun, observable, action, runInAction, computed, useStrict } from 'mobx';
  
  useStrict(true);
  
  class LoginStore {
      @observable authenticated = false;
      @observable token = '';
  
      @computed get isAuthenticated() { return this.authenticated; }
  
  
      @action login = async (credentials) =&gt; {
          const res = await window.swaggerClient.Auth.login(credentials)l
          // checking response for erros
          runInAction(() =&gt; {
              this.token = res.obj.token;
              this.authenticated = true;
          });
      }
  }
  
  const store = new LoginStore();
  
  export default store;
  
  export { LoginStore };
  </code></pre>
  
  <p>and this handler is in my component.</p>
  
  <pre class="lang-js prettyprint-override"><code>handleSubmit = (e) =&gt; {
          e.preventDefault();
  
          this.props.form.validateFields((err, values) =&gt; {
              if (!err) {
                  this.props.store.login(values);
              }
          });
      }
  
      componentDidUpdate() {
          if (this.props.store.isAuthenticated) {
              const cookies = new Cookies();
              cookies.set('_cookie_name', this.props.store.token);
              this.props.history.push('main');
          }
      }
  </code></pre>
  
  <p>It's not the ideal code, I'm just experimenting, but I'm not quite getting it.</p>
  
  <p>Also, if I use the computed value <code>(isAuthenticated)</code> in the <code>render</code> life cycle method, the <code>componentDidUpdate</code> is triggered, but if I didn't use it in the <code>render</code> method, the <code>componentDidUpdate</code> is not triggered.
  For example, if I do this</p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
    if (this.props.store.isAuthenticated) return null
    // .... rest of the code here
  }
  </code></pre>
  
  <p>the above will trigger the componentDidUpdate.</p>
  
  <p>Am I missing something? is there a better way to do it with Mobx?
  Thanks</p>