title: componentDidMount called BEFORE ref callback
body: <p><strong>Problem</strong></p>
  
  <p>I'm setting a react <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html" rel="noreferrer"><code>ref</code></a> using an inline function definition</p>
  
  <pre><code>render = () =&gt; {
      return (
          &lt;div className="drawer" ref={drawer =&gt; this.drawerRef = drawer}&gt;
  </code></pre>
  
  <p>then in <code>componentDidMount</code> the DOM reference is not set</p>
  
  <pre><code>componentDidMount = () =&gt; {
      // this.drawerRef is not defined
  </code></pre>
  
  <p>My understanding is the <code>ref</code> callback should be run during mount, however adding <code>console.log</code> statements reveals <code>componentDidMount</code> is called <strong>before</strong> the ref callback function.</p>
  
  <p>Other code samples I've looked at for example <a href="https://github.com/facebook/react/issues/6249" rel="noreferrer">this discussion</a> on github indicate the same assumption, <code>componentDidMount</code> should be called <strong>after</strong> any <code>ref</code> callbacks defined in <code>render</code>, it's even <a href="https://github.com/facebook/react/issues/6249#issuecomment-272026401" rel="noreferrer">stated in the conversation</a></p>
  
  <blockquote>
    <blockquote>
      <p>So componentDidMount is fired off after all the ref callbacks have
      been executed?</p>
    </blockquote>
    
    <p>Yes.</p>
  </blockquote>
  
  <p>I'm using react <em>15.4.1</em></p>
  
  <p><strong>Something else I've tried</strong></p>
  
  <p>To verify the <code>ref</code> function was being called, I tried defining it on the class as such</p>
  
  <pre><code>setDrawerRef = (drawer) =&gt; {
    this.drawerRef = drawer;
  }
  </code></pre>
  
  <p>then in <code>render</code></p>
  
  <pre><code>&lt;div className="drawer" ref={this.setDrawerRef}&gt;
  </code></pre>
  
  <p>Console logging in this case reveals the callback is indeed being called <strong>after</strong> <code>componentDidMount</code></p>