title: Mobx Inject, Observer and HoC together
body: <p>Here a code that i have <a href="https://jsfiddle.net/v0592ua1/1/" rel="nofollow noreferrer">https://jsfiddle.net/v0592ua1/1/</a> </p>
  
  <pre><code>const {observable, computed, extendObservable} = mobx;
  const {observer,  inject, Provider} = mobxReact;
  const {Component} = React;
  const {render} = ReactDOM
  class AppState {
      @observable authenticated = false;
      @observable authenticating = false;
  }
  
  class Store2 {
      @observable blah = false;
  }
  
  function Protected(Component) {
      @inject("appState")
      @observer
      class AuthenticatedComponent extends Component {
          render() {
              const { authenticated, authenticating } = this.props.appState;
              return (
                  &lt;div className="authComponent"&gt;
                      {authenticated
                          ? &lt;Component {...this.props} /&gt;
                          : !authenticating &amp;&amp; !authenticated
                                  ? &lt;p&gt; redirect&lt;/p&gt;
                                  : null}
                  &lt;/div&gt;
              );
          }
      }
      return AuthenticatedComponent;
  }
  
  
  @inject("s2")
  @Protected
  @observer
  class Comp extends Component {
    componentDidMount() {
          console.log('mount');
    }
  
      render() {
          return (
              &lt;p&gt;blabla&lt;/p&gt;
          )
      }
  }
  
  const appS = new AppState();
  const s2 = new Store2();
  
  render(
      &lt;Provider appState={appS} s2={s2}&gt;
          &lt;Comp  /&gt;
      &lt;/Provider&gt;,
      document.getElementById("app")
  )
  </code></pre>
  
  <p>Protected HoC is for checking if user is authorized or not.</p>
  
  <p>The problem is that if @inject is outer of Protected - componentDidMount will trigger (once if not auth, and twice if authenticated). And if i put Protected as outside decorator it seems to work as expected  but produce a warning </p>
  
  <p><code>You are trying to use 'observer' on a component that already has 'inject'</code>. </p>
  
  <p>What is a proper way to handle this? </p>