Convert React.createClass to Stateless Function Components

As of React 15.5, createClass is deprecated. You’ll get warnings in the console if you’re using it in your code – and, when React 16 comes out, createClass will be removed entirely.

What to do? Well, update your code, of course!

This video and article go over how to convert to stateless function components. You also might want to know how to convert to ES6 classes and I’ve got a video and article for that as well.

Replace createClass

When replacing React.createClass there are 2 options:

• use an ES6 class (learn how here)
• use a stateless function

Here’s how to decide:

• Use an ES6 class if either:
  • the component uses state (search for “this.state” to make sure)
  • the component uses lifecycle methods like componentDidUpdate, componentDidMount, etc.
  • the component has handler methods (handleClick and such)
• Use a stateless function if none of the above is true

This post covers converting to stateless functions – another one covers ES6 classes.

Before: createClass

Here’s the old syntax. Everything is a property of an object passed to React.createClass.

import React from 'react';

var NameWithHandle = React.createClass({
  propTypes: {
    author: React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      handle: React.PropTypes.string.isRequired
    }).isRequired
  },
  render: function() {
    var { name, handle } = this.props.author;
    return (
      <span className="name-with-handle">
        <span className="name">{name}</span>
        <span className="handle">@{handle}</span>
      </span>
    );
  }
});

After: Stateless Function

Here’s the same component, converted to a stateless function. It’s fewer lines of code, too!

import React from 'react';
import PropTypes from 'prop-types';

function NameWithHandle({ author }) {
  const { name, handle } = author;
  return (
    <span className="name-with-handle">
      <span className="name">{name}</span>
      <span className="handle">@{handle}</span>
    </span>
  );
}
NameWithHandle.propTypes = {
  author: PropTypes.shape({
    name: PropTypes.string.isRequired,
    handle: PropTypes.string.isRequired
  }).isRequired
};

What changed?

• Props are passed as an argument: No more this.props.whatever. The first argument to the function is an object containing the props. The code below uses the ES6 destructuring syntax (the { author } part) which pulls the named keys out of the object and stores them in variables of the same name.
• PropTypes are pulled out: Since the component is a function now, its PropTypes are a property on the function itself – instead of being a property on the object that describes the component.
• PropTypes is its own library: In React 15.5, there is no more React.PropTypes. Instead, there’s a separate module that must be installed with npm install prop-types, and can be imported as import PropTypes from 'prop-types'.

Example Project

I put together an example project with 9 different components, both before and after conversion from React.createClass to stateless functions. You can download it here (no email required).