javascript - React.createClass vs. ES6 arrow function

Question

I'm new to React and trying to get a handle on syntax.

I'm developing in a React 15 environment (using the react-starterify template) and have been using the syntax in VERSION 2 below, but, most of the examples and tutorials I find in Facebook's React pages are VERSION 1. What's the difference between the two and when should I use the one over the other?

VERSION 1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

VERSION 2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

Answer 1

The second code is a stateless functional component and is a new syntax/pattern for defining components as a function of props. It was introduced in React v0.14.

You can read more about it on the official React Blog, here, on the official React Documentation, here.

These components behave just like a React class with only a render method defined. Since no component instance is created for a functional component, any ref added to one will evaluate to null. Functional components do not have lifecycle methods, but you can set .propTypes and .defaultProps as properties on the function.

This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

---

• What's the difference?

  This pattern is similar to the "traditional" one, except for the fact that you're using simple functions instead of methods defined in a class. This can be useful when you want to extract functions out of the class (e.g for readability and cleanliness sake).

  One important thing to note is that a functional component is just that - a function. It's not a class. As such, there's no global this object. This means that when you're doing a render you're basically creating a new instance of a ReactComponent, thus leaving out the possibility for these javascript objects to communicate with each other via some global this. This also makes the use of state and any life-cycle methods impossible as a consequence.

---

• How does my app benefit from it?

  Performance
  When you're using stateless functional components, React is clever enough to omit all "traditional" life-cycle methods, which turns out to be providing a fair amount of optimizations. The React team has stated that they are planning to implement further optimizations in the future for memory allocations and reducing the number of checks.

  Adaptability
  Because we're only talking about a function (and not a class), we don't need to worry about state, life-cycle methods, or other dependencies. Given the parameters, the function will always give the same output. As such, it's very easy to adapt such components wherever we want, which turns out to also make testing easier.

  With React’s stateless functional components, each component can be easily tested in isolation. No mocking, state manipulation, special libraries, or tricky test harnesses are needed.

  Encourages best practices
  React is often compared to the V of the MVC pattern because it's meant for creating views. The "traditional" ways of creating components make it easy to "hack in" business logic (e.g with state or ref) into components that really should only handle render logic. They encourage laziness and writing smelly code. However, stateless functional components make it nearly impossible to take such shortcuts and force the better approach.

---

• When should I use the one over the other?

  Generally, using the new pattern is recommended whenever possible! If you only need a render method, but no life-cycle methods or state, use this pattern. Of course, sometimes you do need to use state, in which case you're fine using the traditional pattern.

  Facebook recommends using stateless components whenever rendering static presentational components. Then, if some kind of state is needed, simply wrap those in a stateful component to manage them by using its' state and sending down props to the stateless components.