When is it appropriate to use a constructor in REACT?

Question

I understand the concept of constructors in OOP languages like C++. However, I am not entirely sure when to use a constructor in REACT. I do understand that JavaScript is ob

Answer 1

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

Typically, in React constructors are only used for two purposes:

• Initializing local state by assigning an object to this.state.
• Binding event handler methods to an instance.

https://reactjs.org/docs/react-component.html#constructor

Answer 2

Linke in your example, it's useful use constructor when you need to initialize your state, or bind some event-listener-function

1. <element onClick={this.handler} />
2. this.handler = this.bind.handler(this); inside the constructor

Answer 3

A constructor function is NOT required at all.

State initialization can be done directly in the body of a class and function can be assigned to properties as described below,

Technically these are known as class properties, it may land up soon in native javascript, yet because almost all of us use Babel transpiler for React projects, we can use that syntax

class Comp extends React.Component {
/* 
 * generally we do not need to put the props in state, but even if we need to.
 * then it is accessible in this.props as shown below 
**/
state={ first: 1, second: this.props.second } 

handler= (token) => {
 this.setState(prevState => ({first: prevState.first+1}));
}

render() {
 return <div onClick={this.handler}>{this.state.first} and {this.state.second } </div>
}
}

Read more details about class properties and removing constructor from react class component over here. https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599