title: How to compose react-textarea-autosize with react-mentions
body: <p>It's now clear to me that mixins and inheritance are generally considered <em>bad</em> and composition is the way to go, this from:</p>
  
  <p><a href="https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750" rel="noreferrer">https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750</a></p>
  
  <p><a href="https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html" rel="noreferrer">https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html</a></p>
  
  <hr>
  
  <p>Now, what to do when you find two components that specialize in different things and you want a component that is the result of both behaviors mixed? For instance, I want a textarea that both grows automatically when text goes beyond initial rows, and allow mentions inside (aka. mix <code>react-mentions</code> with <code>react-textarea-autosize</code>)</p>
  
  <ul>
  <li>How am I supposed to compose both in a way that works?</li>
  <li>Am I supposed to code a brand new component copying/merging the inner code from both components?</li>
  <li>What's the ReactJs way to compose in such scenarios?</li>
  </ul>