React.Component vs React.createClass

Question

I am confused whats the difference between a component and a react class?

And when do I use a component over a react class? Looks like a component is a class and createClass creates a component.

https://facebook.github.io/react/docs/top-level-api.html

React.Component

This is the base class for React Components when they're defined using ES6 classes. See Reusable Components for how to use ES6 classes with React. For what methods are actually provided by the base class, see the Component API.

React.createClass

Create a component class, given a specification. A component implements a render method which returns one single child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.

Be aware that using one syntax or the other contains some caveats. For instance mixins are not supported in the case of MyComponent extends React.Component. — gcedo
– gcedo, Commented Jun 5, 2015 at 15:31
I see this in some reflux examples, where some files are written with component and some with createClass. I read your hint before, but that's lead me to that question. So basically if i want to use mixins, I use createClass. If not I can go with ES6, right ? — svenhornberg
– svenhornberg, Commented Jun 5, 2015 at 16:03

Lewis Chung · Accepted Answer · 2016-04-26 04:20:47Z

52

The only React.createClass functionality that isn't supported by MyComponent extends React.Component is mixins.

to do getInitialState() you can do:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

or if you use a transpiler like babel, you can get

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

Instead of auto-binding provided by createClass, you could explicitly bind using .bind(this) like you have shown above, or use the fat arrow ES6 syntax:

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

Instead of putting things in componentWillMount, you could put things in constructor like so:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

There are way more details in the React documentation themselves, but basically the only additional functionality that React.createClass buys is mixins, but afaik anything you could have done with mixins can be done with context and higher ordered components.

edited Apr 26, 2016 at 4:20

answered Jan 5, 2016 at 23:15

Lewis Chung

2,3271 gold badge20 silver badges16 bronze badges

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

1 Comment

Igor Malyk Over a year ago

This should be an accepted answer. Thank you for the detailed and up to date explanation.

Sebastián Palma · Accepted Answer · 2019-07-26 20:27:36Z

16

There are 2 ways of doing the same thing.

React.createClass is a function that returns a Component class.

MyComponent = React.createClass({
  ...
});

React.Component is an existing component that you can extend. Mainly useful when using ES6.

MyComponent extends React.Component {
  ...
}

edited Jul 26, 2019 at 20:27

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

answered Jun 5, 2015 at 14:12

Crob

15.2k3 gold badges33 silver badges28 bronze badges

2 Comments

Kevin Ghadyani Over a year ago

There are more differences. getInitialState() for instance doesn't exist in the ES6 React.Component.

Igor Malyk Over a year ago

Look at Lewis C's answer below. It explains the differences.

Akilan M · Accepted Answer · 2017-03-07 05:14:26Z

10

React.createClass - method to create component classes

For better use with ES6 modules by extends React.Component, which extends the Component class instead of calling createClass

Few differences between both are,

Syntax : React.createClass:

var MyComponent = React.createClass({ });

React.Component:

export default class MyComponent extends React.Component{ }

getInitialState() : React.createClass: Yes React.Component: No

constructor() : React.createClass: No React.Component: Yes

propTypes Syntax : React.createClass:

var MyComponent = React.createClass({
    propTypes: { }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.prototypes = { }

Default Properties : React.createClass:

var MyComponent = React.createClass({
    getDefaultProps(): { return {} }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.defaultProps = { }

state : React.createClass:

State changes can be made inside getInitialState() function

React.Component:

State changes can be made inside constructor(props) function

this :
React.createClass:

automatically bind 'this' values.
Ex: <div onClick={this.handleClick}></div>
'this' can be accessed by default in handleClick function

React.Component:

whereas here we need to bind explicitly,
Ex: <div onClick={this.handleClick.bind(this)}></div>

answered Mar 7, 2017 at 5:14

Akilan M

1231 silver badge5 bronze badges

1 Comment

Pravin W Over a year ago

Thanks for all the examples :) In React.Component: Similar to MyComponent.defaultProps do we have option MyComponent.defaultState ??

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

It's look like React recommend us to use React.createClass

As far as I know

MyComponent extends React.Component not supported getInitialState()
Use .bind(this) in React.createClass you'll get this

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

I think it's might be more than this.

If someone list all of React.createClass functionality will be so great.

Note: React is currently in 0.14.3

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 24, 2015 at 4:49

kitta

2,1053 gold badges29 silver badges46 bronze badges

1 Comment

Gonzalo.- Over a year ago

According to this facebook.github.io/react/blog/2015/03/10/react-v0.13.html from v0.13, they plan to remove at some point the React.createClass() syntax in favor from the other one

Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass.

Precious Adeyinka · Accepted Answer · 2020-12-23 09:53:59Z

0

To be honest the only difference is that React.createClass uses mixins and the new ES6 syntax doesn't.

Both are just syntax, choose what works best for you. React actually wants to deprecate React.createClass in favour of ES6 syntax in future updates.

So I recommend you and future users to check these links, as most of the answer on this thread are related and explained in details.

https://ultimatecourses.com/blog/react-create-class-versus-component

https://www.newline.co/fullstack-react/articles/react-create-class-vs-es6-class-components/

answered Dec 23, 2020 at 9:53

Precious Adeyinka

315 bronze badges

1 Comment

Precious Adeyinka Over a year ago

Ohh I see, I just thought it would be unnecessary repetition since the code examples and snippet are already on that page from the link. But thanks for the tip, I would implement this moving on!

Collectives™ on Stack Overflow

React.Component vs React.createClass

5 Answers 5

1 Comment

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related