DEV Community

Savitha Gollamudi
Savitha Gollamudi

Posted on

Super() vs Super(props)

TL;DR πŸš€

If you want to use this.props inside the constructor of derived class, use super(props).


While checking react code, you might have come across a line super(props), sometimes super(). Ever wondered what's the difference between two?
Why do we need to pass props ? Do we always need to pass props ?

Consider the example below.

import React, { Component } from 'react';
class Game extends Component {
    constructor(props) {
      super(props);
        this.state = {
          player : "Robin",
          score : 25
        }
    }
    render() {
        return (
            <div>
                <h1>Cricket</h1>
                <p>Current Player :{this.state.player}</p>
                <p>Current Score : {this.state.score}</p>
            </div>
        );
    }
}
export default Game;
Enter fullscreen mode Exit fullscreen mode

Every time we are writing a component, we are extending it from React component (The base component class) and that's really important if we don't do that we would be missing a ton of react functionality.

Let's step out of react world for just a moment and let's mimic our own component class

class Component {
    constructor() {
        console.log("INSIDE COMPONENT CONSTRUCTOR")
    }
}
class Game extends Component {
    constructor(){
        console.log("INSIDE GAME CONSTRUCTOR")
    }
}
Enter fullscreen mode Exit fullscreen mode

Lets make a new game

let cricket = new Game();
Enter fullscreen mode Exit fullscreen mode

So you might think, when we initialized a new game, a constructor is called and that should be printed out, unfortunately we get an error
says : Must call super constructor before accessing 'this' . Loosely translated, call a super constructor in derived class before basically doing anything.

Problem is we are extending the base class but we never actually called its constructor and that's super important to do in the derived class's constructor (Inside Game's constructor here), we need to make sure that we're calling the class (it's constructor) we are extending, especially in React because that's how we call all the magic setup stuff that React does and takes care of out of the box for us. so we call super()

class Game extends Component {
    constructor(){
      super()
        console.log("INSIDE GAME CONSTRUCTOR")
    }
}
Enter fullscreen mode Exit fullscreen mode

Now try to instantiate again.

let cricket = new Game();
//output:
  //INSIDE COMPONENT CONSTRUCTOR
  //INSIDE GAME CONSTRUCTOR
Enter fullscreen mode Exit fullscreen mode

What does super(props) do then?

Lets look at this example:

import React, { Component } from 'react';

export default class Food extends Component {
    render() {
        return (
            <div>
                <h1>HI I AM FOOD COMPONENT</h1>
            </div>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode
import React, { Component } from 'react'
import Food from "./Food"
class App extends Component {
  render(){
    return (
    <div>
      <Food item = "PineApple" nutrition="10"/>
    </div>);
  }
}

export default App;
Enter fullscreen mode Exit fullscreen mode

We are passing two props to Food component. You can think of it like we are creating two objects for Food class new Food({item : "pineapple", nutrition: "10"})

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super();
        console.log(this.props); // undefined.
    }
    render() {
        return (
            <div>
                <h1>HI I AM FOOD COMPONENT</h1>
            </div>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

We get output as Undefined even though we have props. OK, what's happening here is if we want to access this.props in the constructor, we have to pass props in super (super(props)). This is kind of bizzare, lets consider this example.

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super();
        console.log(this.props); // undefined.
        console.log(props) // {item:"pineapple", nutrition:10}
    }
    render() {
        return (
            <div>
                <h1>{this.props.item}</h1> /*Prints out pineapple*/
            </div>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

However if you do

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super(props);
        console.log(this.props); // {item:"pineapple", nutrition:10}
    }
    render() {
        return (
            <div>
                <h1>{this.props.item}</h1> /*Prints out pineapple*/
            </div>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

To conclude, If you want to use this.props inside constructor, you need to pass props in super(), otherwise it’s okay to not pass props to super() as we see that irrespective of passing it to super(), this.props is available inside render() function.

Hopefully that was not convoluted and crazy, until next time. Happy Coding! πŸŽ‰ πŸ’»

Top comments (2)

Collapse
 
sanchit_moorem profile image
Sanchit Agarwal

Thank you for information

Collapse
 
gsavitha profile image
Savitha Gollamudi

:)