title: React ES6 component inheritance: working, but not recommended?
body: <p>I'm currently inheriting an ES6 React base component in the following way:</p>
  
  <p>model.js (base component):</p>
  
  <pre><code>class ModelComponent extends React.Component {
  
      render() {
          // Re-used rendering function (in our case, using react-three's ReactTHREE.Mesh)
          ...
      }
  
  }
  
  ModelComponent.propTypes = {
      // Re-used propTypes
      ...
  };
  
  export default ModelComponent;
  </code></pre>
  
  <p>Then I have two extending components that both look basically like this:</p>
  
  <pre><code>import ModelComponent from './model';
  
  class RobotRetroComponent extends ModelComponent {
  
      constructor(props) {
  
          super(props);
  
          this.displayName = 'Retro Robot';
  
          // Load model here and set geometry &amp; material
          ...
  
      }
  
  }
  
  export default RobotRetroComponent;
  </code></pre>
  
  <p>(<a href="https://github.com/poshaughnessy/react-three-demo/" rel="noreferrer">Full source code here</a>)</p>
  
  <p>This appears to work fine. Both models are showing up and working as I would expect.</p>
  
  <p>However, I have read in multiple places that inheritance is not the correct approach with React - instead I should be using composition. But then again, Mixins are not supported in React v0.13?</p>
  
  <p>So, is the approach I'm taking above OK? If not, what's the problem, and how should I do this instead?</p>