title: React Composition vs Inheritance
body: <p>So I was going over the Inheritance vs Composition discussion all over the place. I will talk about my use case.</p>
  
  <p>I am creating a hierarchy of components using react. Stuff like button -> buttonBar for example. So for these sort of things, whatever functionalities I have defined in the button component needs to be present as is in the buttonBar components.</p>
  
  <pre><code>class Button extends React.Component {
      shouldComponentUpdate()  {
          //do some prevalidation
          return result;
      }
  
      myButtonfn = () =&gt; {
          //do Something here
      }
  
      myButtonfn2 = () =&gt; {
          //doSomething else
      }
  }
  
  class ButtonBar extends Button {
      shouldComponentUpdate() {
          return myLogic &amp;&amp; super.shouldComponentUpdate.call(this);
      }
  
      myButtonBarfn = () =&gt; {
          //I should be able to do this
          this.myButtonfn();
          this.myButtonfn2();
      }
  }
  </code></pre>
  
  <p>Currently I have implemented inheritance to achieve this. What is the correct way of going about this? I don't want to go back to es5 way of using with this. React.createClass.</p>
  
  <p>My usage of the functions in the component.</p>
  
  <pre><code>class Button extends React.Component {
      shouldComponentUpdate()  {
          //do some prevalidation
          return result;
      }
  
      myButtonfn = () =&gt; {
          //do Something here
      }
  
      myButtonfn2 = () =&gt; {
          //doSomething else
      }
  }
  
  class ButtonBar extends React.Component {
      doSomething = () =&gt; {
          this.refs.abcd.myButtonfn();//To be able to do this, HOC doesn't work
      }
      render = () =&gt; {
          return (&lt;Button ref="abcd"/&gt;);
      }
  }
  </code></pre>