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.

score 2 · Accepted Answer · 2017-09-09 10:50:01Z

2

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.

edited Sep 9, 2017 at 10:50

answered Oct 16, 2016 at 11:03

user6812877

Sign up to request clarification or add additional context in comments.

3 Comments

Jan Swart Over a year ago

But Facebook also recommends using functional

JVDL Over a year ago

They recommend using functional stateless components for those components in which you do not need to keep state and don't need the lifecycle methods (onComponentDidMount, shouldComponentUpdate, etc)

Jan Swart Over a year ago

I guess this link explains it. Use functional components as far as possible (there will be performance optimizations in the future). This is recommended. When local state or lifecycle hooks are necessary in the component use ES6 class syntax.

Kirill Stas · Accepted Answer · 2016-10-17 17:06:37Z

1

As I know, it is recommend to use functional component when you need just create presentational logic component. For component that has any logic we use smth like React.createClass().

There are two ways of doing that:

First, you create general component and than divide it on presentational logic and business logic.

Second, you can create them alongside.

Be careful! When divide these components, your business logic must render your presentational logic!

For more practice see tutorials on the codecademy

answered Oct 17, 2016 at 17:06

Kirill Stas

1,4774 gold badges14 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related