Home » Reactjs » What's the difference between “super()” and “super(props)” in React when using es6 classes?

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

When is it important to pass props to super(), and why?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}
Answers:

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 Ben 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)

Questions:
Answers:

In this example, you are extending the React.Component class, and per the ES2015 spec, a child class constructor cannot make use of this until super() has been called; also, ES2015 class constructors have to call super() if they are subclasses.

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

By contrast:

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

More detail per this excellent stack overflow answer

You may see examples of components created by extending the React.Component class that do not call super() but you’ll notice these don’t have a constructor, hence why it is not necessary.

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

One point of confusion I’ve seen from some developers I’ve spoken to is that the components that have no constructor and therefore do not call super() anywhere, still have this.props available in the render() method. Remember that this rule and this need to create a this binding for the constructor only applies to the constructor.

Questions:
Answers:

When you pass props to super, the props get assigned to this. Take a look at the following scenario:

constructor(props) {
    super();
    console.log(this.props) //undefined
}

How ever when you do :

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}

Questions:
Answers:

As per source code

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

you must pass props every time you have props and you don’t put them into this.props manually.

Questions:
Answers:

Here is the fiddle I’ve made: https://jsfiddle.net/beshanoe/zpxbLw4j/1/. It shows that props are assigned not in the constructor by default. As I understand they are assinged in the method React.createElement. Hence super(props) should be called only when the superclass’s constructor manually assings props to this.props. If you just extend the React.Component calling super(props) will do nothing with props. Maybe It will be changed in the next versions of React.

Questions:
Answers:

super() is used to call the parent constructor.

super(props) would pass props to the parent constructor.

From your example, super(props) would call the React.Component constructor passing in props as the argument.

More information on super:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super