Deconstructing the React Component Constructor

While doing the recent labs, I was stumped by exactly how the React.Component constructor function worked. The syntax for the constructor looks like this:

class MyComponent extends React.Component {
constructor() {
super()
}

render() {
return(<div>Some text</div>)
}
}

I understood what it intended to do on a more abstract level: set up the parameters for the React Component it was called on, mostly in terms of its states. Still, the exact functioning of super() and when you pass in arguments to both constructor() and super() completely eluded me. What does the super() do anyways?

The super method essentially sets up this to refer to the component instance you are constructing. super is necessary for the constructor function to assign methods/values like props to the component you are creating, and if you fail to include it, you will receive an error when you try to bundle the JSX into JS. super in this context calls React.Component.constructor() which, among other things, properly sets the scope of this and implicitly binds methods to this, such as .state. You can now set values for this.state as such:

class MyComponent extends React.Component {
constructor() {
super()

this.state = {
counter: 5
}
}

render() {
return(<div>Count: {this.state.counter}</div>)
}

}

What happens when you want to set the component’s state relative to one of its properties? Now, you need to add an argument to super(props) through constructor(props). By passing props to constructor(props), React now knows that props is a method that will be used for the constructor. You can now write:

class MyComponent extends React.Component {
constructor(props) {
super()

this.state = {
counter: props.initialCount
}
}

render() {
return(<div>Count: {this.state.counter}</div>)
}
}

Because React is smart, it assumes that you mean this.props when it reaches the constructor function for this component instance during setup (which part of the lifecycle this occurs is something I’m still trying to figure out). So, when you pass in an initialCount in your index.js for this component as a prop, React uses that as this.props.initialCount. Technically, this is not good practice, as you want to explicitly refer to this.props.initialCount in case props is used somewhere else in your React app for something else; however, you can’t write this.props in this constructor function, because this, as it is set up by super() right now, does not have a .props. To add that, you need to pass in props as an argument to super(props). The React.Component.constructor(props) method will then bind a props method from React.Component.constructor to this (the component you are making). You can now write:

class MyComponent extends React.Component {
constructor(props) {
super(props)

this.state = {
counter: this.props.initialCount
}
}

render() {
return(<div>Count: {this.state.counter}</div>)
}
}

And you have a fully functioning constructor!

Sources:

React JS Discussion Thread
React Documentation