← back to the blog


React mixins, Why use mixins?

Posted on January 23rd, 2019 in JavaScript by George

First of all, the first reason for which I would avoid to use mixins is that you ar are bound to use React.createClass() or create-class-module, ES6 classes are not compatibile with React mixins. 

If you are not familiar with how mixins look like, take a look at the following example:

 

var PureRenderMixin = require('react-addons-pure-render-mixin');

var Button = React.createClass({
  mixins: [PureRenderMixin],

  // ...

});

 Mixins are often used with a type of Flux Store where you have to create a subscription in componentDidMount and remove it in componentWillUnmount where the change handles is going to use this.setState().

There are few available tools there like  (Fluxxor http://fluxxor.com/) which will deal automatically with the processes described above for you.  If you base your application to depend on a Store management tool which is based on mixins then you are forced to stick for with ES5 classes until the end.