Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

Constructor vs getInitialState in React

No ES6? No problem. getInitialState is the ES5 friendly method to define the initial state of a React component.

Nathan Nguyen
Nathan Nguyen
January 05, 2021
2 min read

One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s constructor and the built in method getInitialState. While the simple answer to this question is indeed simple: “getInitialState is the ES5 friendly method to define the initial state of a React component,” there are a couple more details around getInitialState as well as React’s ES5 support that are interesting and useful to highlight.

Constructor vs getInitialState: With or without Classes:

One of the fundamental differences between ES5 and ES6 in regards to React implementation is the new class keyword. It allows definition of React components as classes, which is a familiar data structure for anyone who has had experience with more traditional object-oriented languages such as Java or C++. The class structure also allows for natural organization of the component’s elements like state, props, lifecycle methods and member functions. However, ES5 did not provide the same convenience. So instead of defining a React component as a class:

class HelloWorld extends React.Component {
  render() {
    return <span>Hello World</span>;
  }
}

You would rely on a helper module called create-react-class:

var createReactClass = require('create-react-class');
var HelloWorld = createReactClass({
  render: function() {
    return <span>Hello World</span>;
  }
});

And it is within the object passed into create-react-class that you could define an initial state by populating the getInitialState attribute:

var HelloWorld = createReactClass({
  getInitialState: function() {
    return {name: this.props.name};
  },
  render: function() {
    return <span>Hello {this.state.name}</span>;
  }
});

Which, in ES6 implementation would be the equivalent of:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }
  }
  render() {
    return <span>Hello {this.state.name}</span>;
  }
}

Autobinding

One difference worth noting is that the create-react-class method automatically binds this to every attribute method. This no longer holds true if you define React components using the common ES6 class syntax, making it so that you have to manually bind this to internal methods:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }

    this.changeName = this.changeName.bind(this);
  }
  changeName() {
    this.setState({ name: "World" });
  }
  ...
}

Or otherwise use the “arrow function” shorthand which takes care of binding:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    }
  }
  changeName = () => {
    this.setState({ name: "World" });
  }
  ...
}

Parting Words

Since the update to ES6, there have been multiple new React iterations. You could now forgo the constructor declaration altogether and just declare state inline as a class member, or utilize React Hooks as a new way to initialize states. However, the ES5 support remains useful for legacy systems and adds to the overall flexibility of React as a toolset.

You can read more about React's ES5 support in the official doc entry here, and the v0.13.0 beta release blog entry here, for the respective ES6 changes.



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptNodeJsReactAuthenticationCSSSecurityOAuthGoSocialLogin

Are your customers safe on your application?

According to Forbes, data breaches exposed 4.1 billion records in the first six months of 2019. If this gets you worried, we’ve got your back!

LoginRadius protects your customers’ identities. We provide world-class security for your customers during login, registration, password setup, and any other data touchpoints, and make sure that their data is safe. We do so through by offering open source SDKs, integrations with over 150 third party applications, pre-designed and customizable login interfaces, and best-in-class data security products such as MFA, RBA, and Advanced Password Policies. The platform is already loved by over 3,000 businesses with a monthly reach of 1.17 billion users worldwide.Secure Your Application Now

Nathan Nguyen

Nathan Nguyen

Nathan Nguyen is a Software Engineer at LoginRadius. With deep interest in creating user-facing applications, he spends a lot of his time with web and mobile technology stacks, off and on the job, looking to build applications that are ever more intuitive and helpful to end users. Loves food, travel, photography and video games.

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces