ReactJS Constructor() Method

The reactjs constructor is a method used to initialize an object’s state in a class. It automatically called during the creation of an object in a class.
It can manage initial initialization tasks such as defaulting certain object properties or sanity testing the arguments passed in. Simply placed, the constructor is a method that helps in the creation of objects.

The constructor in a React component is called before the component is mounted. When you implement the constructor for a React component, you need to call super(props) method before any other statement. If you do not call super(props) method, this.props will be undefined in the constructor and can lead to bugs.

Table of Contents

ReactJS Constructor() Syntax

constructor(props){
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
  }

In above’s example, the event will fire after the user has clicked the button or keyup, blur or any other event and then we need to set up the context to its parent and not the child context, so we are binding this to parent.

In React, constructors are mainly used for two purposes:

It used for initializing the local state of the component by assigning an object to this.state.
It used for binding event handler methods that occur in your component.

Note: If you neither initialize state nor bind methods for your React component, there is no need to implement a constructor for React component.

The constructor only uses this.state to assign initial state, and all other methods need to use set.state() method. The concept of the constructor can understand from the below example.

App.js

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.techiebundle.com'  
      }  
    this.handleEvent = this.handleEvent.bind(this);  
  }  
  handleEvent(){  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
    <h2>React Constructor Example</h2>  
    <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>Please Click</button>  
      </div>  
    );  
  }  
}  
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/app.jsx';

ReactDOM.render(<App />, document.getElementById('App'));

The most common question related to the constructor are:

Is it necessary to have a constructor in every component?
No, it is not necessary to have a constructor in every component. If the component is not complex, it simply returns a node.

Is it necessary to call super() inside a constructor?
Yes, it is necessary to call super() inside a constructor. If you need to set a property or access ‘this’ inside the constructor in your component, you need to call super().

Arrow Function

If you are using arrow functions then, you do not need to bind any event to this. In that scenario, this scope is global and not limited to any calling function. So If you are using ES6 syntax, then it is best practice to use Arrow Function.

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.techiebundle.com'  
      }  
  }  
  handleEvent = () => {  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
    <h2>React Constructor Example</h2>  
    <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>Please Click</button>  
      </div>  
    );  
  }  
}  
export default App;

We can use the constructor() method in 4 ways

The constructor is used to initialize state.
Using ‘this’ inside constructor.
Initializing third-party libraries.
Binding some context(this) when you need a class method to be passed in props to children.

React create-react app
ReactJS Props | Understand all about Props
Props Validation in ReactJS
State vs Props in React