Using React.createClass instead of ES6 Classes (extends React.Component)?

Question

Is there any harm in using React.createClass to define my components instead of using the ES6 approach where I extend from React.Component?

Below is an example where the Circle component is created using React.createClass and the Circle2 component is created using the ES6 class approach:

var Circle = React.createClass({
  render: function() {
      return (
        <p>Hello</p>
      );
    }
});

class Circle2 extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

I have read about the technical differences between both approaches, but am I doing something wrong by telling myself (and others) that using React.createClass is totally OK?

Thanks,
Kirupa

This is a "too broad" question. Can you provide an example or any special case in order to narrow it down? — Athafoud
Thanks for letting me know. I've provided a code snippet of both approaches. — Kirupa Chinnathambi
In this case there is no difference, but React.createClass allows you to use mixins, with ES6 you are not able to use it. — The Reason
Using ES2015 class as component is mostly Facebook reason (many components causes slower initialization due to autobinding behavior/they have like, more than 10000). User whom has just 100 components/not much limited to initialization performance don't need to care about its differences other than API. — Jaeho Lee

Dan Prince Dan Prince · Accepted Answer · 2016-03-28T12:01:53

There's no harm in using React.createClass. It's still the official suggestion in the docs and the unofficial suggestion from the devs.

In fact, I'd go as far as to say that I think it's still a better solution than classes, for a few reasons.

Object literal syntax is a very intuitive way to define properties and most Javascript developers will be very comfortable with it already.

I've heard it argued that the class syntax is more elegant, but with object literal shorthand and arrow functions, calls to createClass can be pretty expressive too.

const Circle = React.createClass({
  render() {
    return (
      <p>Hello</p>
    );
  }
});

Of course, more than either of the others you should look for opportunities to use stateless functions instead.

const Circle = (props) => <p>Hello</p>;

They're the simplest option and they resolve a lot of the ambiguity above by simply not including it. It's just a function that takes props as arguments.

Using React.createClass instead of ES6 Classes (extends React.Component)?

1 Answers