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.

Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct