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!

Watch the video below for how to do it, or read on.

Get the code!

Replace createClass

When replacing React.createClass, there are 2 options:

• Use an ES6 class
• 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.
• Use a stateless function if neither of the above is true

This post covers converting to stateless functions (another one will cover 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

You can download an example project with 9 different components, both before and after conversion from React.createClass to stateless functions. You'll also get notified when I publish new articles like this - including the followup on converting to ES6, and how you can automate the conversion in your own code with codemods.

Get the code!

Convert React.createClass to Stateless Function Components was originally published by Dave Ceddia at Dave Ceddia on May 03, 2017.

CodeProject