title: Calling a function on React Element before the Component did mount
body: <p>I want to use an React Component as a object to make some calculation based on other components <strong>before I render / mount them</strong>. I have a working solution but I find the part <code>a.type.prototype.calculate.bind(a)()</code> quite dirty.</p>
  
  <p>Here's my current way (<a href="https://jsbin.com/kahuwun/edit?js,console,output" rel="nofollow noreferrer">also on JSBin</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ChildComponent extends React.Component {
    calculate() {
      return this.props.a + this.props.b;
    }
  
    render() {
      return &lt;span&gt;{this.props.a + this.props.b} &lt;/span&gt;
    }
  }
  
  class ParentComponent extends React.Component {
    render() {
      var children = [
        &lt;ChildComponent a={2} b={3} key="1" /&gt;,
        &lt;ChildComponent a={1} b={2} key="2" /&gt;
      ];    
      var children_sorted = children.slice();
      
      children_sorted.sort((a,b) =&gt; {
        return a.type.prototype.calculate.bind(a)()
        - b.type.prototype.calculate.bind(b)()
      });
  
      return (
        &lt;h1&gt;Children {children} -&gt; {children_sorted}&lt;/h1&gt;      
      );
    }
  }
  
  ReactDOM.render(
    &lt;ParentComponent/&gt;,
    document.getElementById('react_example')
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="react_example"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does somebody have a better way to achieve that?</p>