What is the difference between using constructor vs getInitialState in React / React Native?

When setting initial state in React components, the constructor and getInitialState are two distinct methods that apply to different component types and React versions.

First, the getInitialState method was used in early versions of React to create class components. When defining components with React.createClass, getInitialState returns the initial state object. It is a plain method that does not require the this keyword because React.createClass automatically binds all methods to the instance. Here is an example:

javascript
const MyComponent = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  render: function() {
    return <div>{this.state.count}</div>;
  }
});

However, when React introduced ES6 class syntax, getInitialState was deprecated. Instead, initial state is set within the class's constructor. In ES6 class components, you must explicitly call super(props) to inherit from React.Component's constructor and set the initial state using this.state. Here is an example:

javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

To summarize the key differences:

• getInitialState is specific to React.createClass in early React versions, while the constructor is used for initial state in ES6 class components.
• In the constructor, you must call super(props) and directly assign the state object via this.state, whereas getInitialState directly returns the state object without using this.
• React officially recommends ES6 class components, so modern React code typically uses the constructor rather than getInitialState.

Components in React Native follow these rules because it is built on React, ensuring consistent behavior when setting initial state. In React, both methods initialize component state but apply to different versions and component types.

constructor method:

In React ES6 class components, the constructor initializes state. It is called early in the component lifecycle and is part of ES6 classes (not React-specific), allowing you to set initial state and bind this for event handlers.

jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props); // Required to inherit from React.Component
    this.state = { /* initial state */ };
  }

  render() {
    // ...
  }
}

Here, this.state is initialized within the constructor, which is the recommended approach for ES6 class components.

getInitialState method:

getInitialState was used with React.createClass in early React versions to define components. React.createClass is a React helper method (not part of JavaScript), and you use it to return the initial state object.

jsx
var MyComponent = React.createClass({
  getInitialState: function() {
    return { /* initial state */ };
  },

  render: function() {
    // ...
  }
});

Starting from React 16.0, React.createClass is deprecated, and getInitialState is no longer recommended. For newer React versions, use ES6 classes and the constructor to define components and initialize state.

In summary, ES6 class components use the constructor for state initialization, while older React.createClass-based components use getInitialState. Since React 16.0, React.createClass is deprecated, so modern React code should use the constructor. React Native adheres to these rules as it uses the same component model.