Clarification on React Class based component constructor

Question

I am reviewing some React Js basics and I need some clarifications about the use of the constructor method within a react class based component. My normal practice is to declare a class based component and define state without using the constructor, like so:

import React, { Component } from 'react';

export class Testing extends Component {
  state = {
    example: "Hello World!!!"
  }

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

export default Testing;

Since state is so easy to use without the (seemingly) pointless constructor, I began asking myself what the constructor was for. Just to clarify what I mean by the constructor, it is when you declare state like this instead of the above example:

constructor(props) {
  super(props)

  this.state = {
    example: "Hello World!!!"
  }
}

I found the suggestion in the react documentation that it is best practice to utilize the constructor, but it did not say why. After a little searching, I found a source that suggested that the constructor give you access to the props. I tested this and do see how the constructor gives access to props; however, the class can access props WITHOUT using the constructor, simply by stating this.props.myTest. I tested this as well by defining props in a parent component and drilling them down to the child component. I was able to access the props just fine with the this.props.myTest statement, no constructor necessary. So my question is, "What specifically does the constructor do, and when is it necessary (or is it ever necessary)?"

Answer 1

"when is the constructor necessary ?":

The constructor is not necessary, if you don't need it.

You might need a constructor e.g. if you need to bind a method to the class instance (so that this keeps pointing to the class instance if you pass the function over to some other execution context):

export class Testing extends Component {
  constructor( props ) {
    super( props );
    this.myMethod = this.myMethod.bind( this );
  }
  
  myMethod(){
    console.log( this.props ); 
  }

  render() {
    return <button onClick={ this.myMethod }>
      click
    </button>;
  }
}

"What specifically does the constructor do" ?

A constructor "creates the instance" in javascript. So without a constructor, there would be no instance. But also there is inherently always a constructor, even if you don't define one specifically.

You can define a constructor to overwrite the default constructor or to add some extra logic to be run additionally to the super-constructor.

Accessing this.props in React

In javascript you could not access this.props without calling super(props).

Note that the constructor argument props and the instance property this.props are different "things". Let's rename the constructor argument for now, to make it more obvious:

class SuperClass {
  constructor( constructorArguments ) {
    this.props = constructorArguments;
  }
}

class DerivedClass extends SuperClass {
  constructor( props ) {
    super();                   // <-- call the SuperClass constructor
  }
  method(){
    console.log( this.props ); // <-- this.props is obviously never defined
  }
}

const instance = new DerivedClass('some props');
instance.method();

But React "takes measures" to assign this.props anyway, even when super(props) was never called.

But that happens later (after the constructor is done), so you are able to access this.props in other methods later, but not inside the constructor:

export class Testing extends Component {

  constructor( constructorArguments ) {
    super();                   // <-- super() is called without arguments
    console.log( this.props ); // <-- this.props is undefined
  }

  render() {
    console.log( this.props ); // <-- React sorted it out, now this.props is available 
    return null;
  }
}

If you pass the constructor arguments to the super class constructor, then you can access this.props inside the constructor:

constructor( constructorArguments ) {
  super( constructorArguments );   // <-- super() is called with arguments
  console.log( this.props );       // <-- this.props is available
}

React recommends to call super(props) anyway, to avoid introducing bugs with later changes. I might add that it is very little extra code that doesn't do any harm.

Defining the state

class fields were not always available, so you had to define the state inside the constructor, as the React example shows (like this.state = { value: 'value' }).

I personally think that it is probably ok now to use the class fields, but I always tend to follow the official documentation, even if it might be outdated. There still might be implications which I am not aware of.

See also: is-it-better-to-define-state-in-constructor-or-using-property-initializers