title: React.js: Refs are not available on initial render
body: <p>I’m tying to position a circle in the middle of the component’s root DOM element:</p>
  
  <pre><code>var App = React.createClass({
      render: function() {
          return &lt;svg ref="svg"&gt;
              &lt;circle r="9" cx={this.centerX()} cy="15"/&gt;
          &lt;/svg&gt;;
      },
      centerX: function() {
          var svg = this.refs.svg.getDOMNode();
          return svg.offsetLeft + Math.round(svg.offsetWidth / 2);
      }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/NV/94tCQ/" rel="noreferrer">http://jsfiddle.net/NV/94tCQ/</a></p>
  
  <p>Chicken-and-egg problem takes place here: <code>this.refs</code> is undefined on the first render. What’s the best way to solve this it? I would prefer not to reference external DOM nodes (such as <code>document.body</code>).</p>