When creating React components should I use functional components, React.createClass or extends React.Component?

Question

I am quite new to React and have been reading up a lot about it. I have come across three different methods to create components:

Functional Components:

const Hello = ({world}) => {
  return (
    <div>{"Hello" + world}</div>
  );     
}

React.createClass (Factory):

const Hello = React.createClass({
  render: function() {
    return <div>{"Hello" + this.props.world}</div>
  }
});

ES6 Class Extends

class Hello extends React.Component {
  render() {
    return (
      <div>{"Hello" + this.props.world}</div>
    );
  }
}

Apart from the obvious that the functional components don't have any state coupled to it and is probably a more functional approach to doing components, why would I use the different methods?

In the React documentation they use all three methods. Some of the Stack Overflow articles suggest the Class method and then some suggest the Factory method.

Unknown Unknown · Accepted Answer · 2016-10-16T11:03:16

Using functional is recommended for components that are stateless.

Using React.Component extend is recommended if you are working with ES6+/TypeScript code. React Native has support only for this type of component creation.

React.createClass is for used with ES5.

Browsers will soon have a complete support and Facebook recommends to use React.Component instead of React.createClass and to use functional for stateless.

Edit

Facebook added a deprecation warning to React.createClass in React 15.6.0 and points users to use create-react-class instead.

When creating React components should I use functional components, React.createClass or extends React.Component?

2 Answers