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).

Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.

Learn to think in React

• 90+ screencast lessons
• Full transcripts and closed captions
• All the code from the lessons
• Developer interviews

Start learning Pure React now

Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.

Alan Lavender

@lavenderlens