title: Best way to retrieve and cache bounding boxes of SVG nodes with React.JS
body: <p>I am rendering a SVG component with labels. Those label components need to be correctly laid out depending on their text content (and so their size) in order to avoid overlapping themselves.</p>
  
  <p>To get the <strong>real</strong> size of each labels, it seems a <strong>double-render</strong> is needed each time a label content is updated.</p>
  
  <p>At the label component level, I need to</p>
  
  <ul>
  <li>render it for the first time</li>
  <li>retrieve the bounding box of the real SVG DOM node</li>
  <li>cache the bounding box for performance reason</li>
  <li>re-render the component to adjust the label position according to its cached bounding box</li>
  </ul>
  
  <p>Then, at each redraw :</p>
  
  <ul>
  <li>render according to the cached bounding box</li>
  <li>compare label content between previous and updated props and if changed:</li>
  <li>update and cache the label bounding box</li>
  <li>re-render according to the updated and cached bounding box</li>
  </ul>
  
  <p>So far, here is how I have implemented my label component:</p>
  
  <pre><code>var Label = React.createClass({
  
    updateBBox: function() {
      // Trigger re-rendering
      this.setState({
        bbox: this.getDOMNode().getBBox()
      });
    },
  
    componentDidMount: function() {
      // Will trigger a re-rendering at mount
      this.updateBBox();
    },
  
    componentDidUpdate: function(prevProps, prevState) {
      // If content has changed, re-render
      if (this.props.content !== prevProps.content) {
        this.updateBBox();
      }
    },
  
    render: function() {
      // Render according to size from current bounding box if any cached
      // ...
    }
  
  });
  </code></pre>
  
  <p>So, my question is not about the algorithm but if there is a better React-compliant way to implement this. Is using the state for caching this sort of slow 'computations' or DOM accesses allowed in the React way? Is double-rendering an unusual case for React?</p>