Month: March 2016

If you are upgrading React, you may find situations where you want to switch from Javascript objects to ES6 classes.

For instance, say you have these objects:

var MyMixin = {
  componentShouldUpdate: function() {
    // some logic
  }
}

React.createClass({
  mixins: [MyMixin]
  getInitialState: function() {
    // do some stuff...
  },
  render: function() { 
    return (
)
  }
})

Ideally you would convert everything to classes, and use inheritance to get the mixin in:

class MyMixin {
  function componentShouldUpdate() {
    // some logic
  }
}

class MyComponent {
  constructor() {
    // do some stuff...
    this.state = {}
  }

  render() { 
    return (
)
  }
})

If you can’t do this (e.g. the mixin is in a library, or it’s too much code to change at once), you can also monkey-patch the mixin’s methods into a base class for the component:

var MyMixin = {
  componentShouldUpdate: function() {
    // some logic
  }
}

class MyComponent extends (
  React.createClass({ 
    mixins: [MyMixin],
    render: () => {}
  }) {
  constructor() {
    // do some stuff...
    this.state = {}
  }

  render() { 
    return (
)
  }
})