Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Constructor(props) and super(props) VS constructor() and super() in React

I know that this question was asked many times, but it is still doesn't clear. Many people just said:

Pass props to constructor if you want to access this.props there

one more example of the answer

Oficial doc says Class components should always call the base constructor with props. , but if we do not pass props to constructor, we will still have this.props everywhere exept constructor.

Also from react source code we can see source code of the React.Component function ReactComponent(props, context) { this.props = props; this.context = context; }

But it is confuses me even more. super() should be called with two parametrs: props and context . But we invoked our super empty and still have access two this.props. According to ECMA documentation super() invokes parent constructor() with parametrs passed to super() . But our super() is empty.

So my questions are:

  1. Why official docs says:

Class components should always call the base constructor with props.

  1. How React set props to child component if super() and constructor() is empty?
  2. Is it bug of feature of the React that props are accessible in child component without passing props to super() and constructor()?
like image 380
mr__brainwash Avatar asked Nov 22 '17 20:11

mr__brainwash


People also ask

What's the difference between super () and super props in React?

Before going deep into the main difference, let us understand what is Super() and Props as shown below: Super(): It is used to call the constructor of its parent class. This is required when we need to access some variables of its parent class. Props: It is a special keyword that is used in react stands for properties.

What is constructor props and super props?

props in a Constructor function. In fact, what the super() function does is, calls the constructor of the parent class. Syntax: There's nothing complex in using super(props), we just have to call super(props) in the constructor method of our child class component, like so: class Checkbox extends React.

What is the purpose of using super () constructor with props argument?

Super() function calls the constructor of the parent class. Using super constructor with props arguments basically allows accessing this. props in a Constructor function. Let us create a React project and then we will create a UI to showcase the above purpose.

What is constructor and super in React?

In React, the constructor is called during component creation and before mounting. If you want to implement the constructor for a React component, call the super(props) method before any other statement. Otherwise, this. props will be undefined in the constructor and create bugs.


1 Answers

Here is an answer from Dan Abramov:

But if we do not pass props to constructor, we will still have this.props everywhere except constructor.

Yes, React sets this.props anyway after the constructor runs. Still, it is confusing to have this.props work in some places and not others. Especially if both constructor and other methods call some shared method that reads this.props. So, to avoid any potential confusion, we recommend always calling super(props).

Also from source code of Create Element you can see that createElement adds props regardless if you use super(props)

createElement() has no relation to this question. It creates an element, not an instance.

So, to get back to your question, technically it's only necessary if you plan to access this.props in the constructor or any method you call from constructor. However it's pretty confusing to have to remember this. You might know about it and not call super(props), but the next person on your team will want to access this.props in a constructor and will be surprised it doesn't work. It's just easier to always specify it to avoid these problems.

like image 183
mr__brainwash Avatar answered Sep 20 '22 20:09

mr__brainwash