What’s the difference between “super()” and “super(props)” in React when using es6 classes?

by

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.

This is explicitly said in one Sophie Alpert’s answer to a similar question.

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.

(Thanks @MattBrowne for the link)

More Related Contents:

  1. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  2. Dynamically import images from a directory using webpack
  3. Programmatically navigate using react router V4
  4. ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
  5. mobx-react observer don’t fires when I set observable
  6. Differences between creating a new class to using export const
  7. How to import and export components using React + ES6 + webpack?
  8. In React ES6, why does the input field lose focus after typing a character?
  9. Updating React state when state is an array of objects
  10. How to tell webpack dev server to serve index.html for any route
  11. Unexpected block statement surrounding arrow body
  12. ReactJS with ES6: this.props is not a function when I communicate two components
  13. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  14. React: Which is recommended arrow or normal function?
  15. Difference between import React and import { Component } syntax [duplicate]
  16. How to assign the correct typing to React.cloneElement when giving properties to children?
  17. What is the expected return of `useEffect` used for?
  18. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  19. Put A Warning If Page Refresh in ReactJS
  20. Arrow function without curly braces
  21. What is the difference between using constructor vs state = {} to declare state in react component?
  22. How to call stopPropagation in reactjs?
  23. Arrow functions and the use of parentheses () or {} or ({})
  24. Cannot use JSX unless the ‘–jsx’ flag is provided
  25. Difference between @mui/material/styles and @mui/styles?
  26. React hook rendering an extra time
  27. React cannot read property map of undefined
  28. How to enable file upload on React’s Material UI simple input?
  29. How to test Async Storage with Jest?
  30. create react app not picking up .env files?

Leave a Comment