Sign in
Log inSign up

super(props) why? for what?

Shahzad Asfar's photo
Shahzad Asfar
·Oct 28, 2018

There is only one reason when one needs to pass props to super():

When you want to access this.props in constructor. Passing:

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

console.log(this.props)
// -> { icon: 'home', … }
}
}

Not passing:

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

console.log(this.props)
// -> undefined

// Props parameter is still available
console.log(props)
// -> { icon: 'home', … }
}

render() {
// No difference outside constructor
console.log(this.props)
// -> { icon: 'home', … }
}
}

Note that passing or not passing props to super has no effect on later uses of this.props outside constructor. That is render, shouldComponentUpdate, or event handlers always have access to it. because React sets .props on the instance from the outside immediately after calling the constructor.

The documentation—State and Lifecycle, Adding Local State to a Class, point 2—recommends:

Class components should always call the base constructor with props.

However, no reason is provided. We can speculate it is either because of subclassing or for future compatibility.