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 object oriented, but I am not sure what the constructor is actually 'constructing'.

When rendering a child component, do you need a constructor in the child component? For example:

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         items: [],
         error: null
      }
    }
    render () {
       return (
          <React.Fragment>
             <ChildComponent data={this.state.items}></ChildComponent>
          </React.Fragment>
       )
    }
}

I will keep the example short for the sake of brevity. But, why would do you need a constructor? And would you need a constructor in the child component for props?

It is possible that my ES6 knowledge is not up to snuff.

score 17 · Accepted Answer · answered Oct 27 '18 at 13:42

17

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

answered Oct 27 '18 at 13:42

wang

1,660
9
20

8

But I can initialize my state without needing a constructor and use arrow functions so I dont need to bind. Does that mean the constructor is not useful at all? https://stackoverflow.com/questions/42993989/init-state-without-constructor-in-react – rotimi-best Aug 24 '19 at 07:21
Even now at V 18 constructor is used in docs examples. Is there a specific reason we should continue to use a constructor ? – isimmons Dec 18 '22 at 09:13

Akshay Vijay Jain · Answer 2 · 2020-09-13T03:55:42.507

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

score 0 · Answer 3 · answered Oct 27 '18 at 13:44

0

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

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

answered Oct 27 '18 at 13:44

Aldo Maria Landini

159
2
6

When is it appropriate to use a constructor in REACT?

3 Answers3

Linked

Related