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

When you write a React class component that extends React.Component, you typically define a constructor like this:

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

You might also see some examples use super(props) instead of super(). Let’s break down the difference:

1. What Does super() Do?

• In JavaScript classes, calling super() inside the constructor invokes the parent class’s constructor.
• For a React class component, the parent class is React.Component.

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

With this approach, you cannot access this.props inside the constructor, because props were never passed to the React.Component constructor.

2. What Does super(props) Do?

• This version forwards the props argument to the parent constructor:

class MyComponent extends React.Component {
  constructor(props) {
    super(props); // Passes props to React.Component
    // ...
  }
}

Now, this.props is initialized and can be safely referenced within the constructor. For instance, you could do:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props.title); // Safe to use, as props are available
  }
  
  render() {
    return <div>{this.props.title}</div>;
  }
}

If you only used super(), then trying to reference this.props.title in the constructor would be undefined.

3. Best Practices and Common Usage

a) Recommended Pattern

Most React documentation recommends always calling super(props) to avoid confusion and ensure that this.props is correctly set from the start:

constructor(props) {
  super(props);
  // Now this.props is defined
  this.state = { value: props.initialValue };
}

b) When super(props) Is Not Strictly Needed

If you never need to reference this.props inside the constructor—perhaps you only initialize state with static values, or you have no constructor at all (e.g., using a class field for state)—then calling super(props) vs. super() might not make a practical difference. Still, it’s a safe habit to call super(props) in case your needs change later.

c) Function Components and Hooks

With modern React, many developers prefer function components with hooks (useState, useEffect) instead of class components. Function components don’t use constructors, so you don’t worry about super() vs super(props):

function MyFunctionalComponent({ title, initialValue }) {
  const [value, setValue] = React.useState(initialValue);
  
  return <div>{title}: {value}</div>;
}

Conclusion

• super(props) passes the props to the React.Component constructor, ensuring this.props is initialized and available inside your component’s constructor.
• super() calls the parent constructor without passing props, so this.props isn’t set up when the constructor executes.
• While it may not always break your code to omit the props argument, the best practice in class components is to always use super(props) to avoid unexpected undefined values and to maintain consistency.