When is it appropriate to use a constructor in REACT?

WebDream picture WebDream · Oct 27, 2018 · Viewed 8.1k times · Source

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.

Answer

wang picture wang · Oct 27, 2018

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