13

What is the correct way to access props in the constructor ? Yes i know that in the React documentation is said that

When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs

To be more clear , why do wee need this.props if we can just use props inside constructor

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

        console.log(props)
        // -> { something: 'something', … }
        // absolutely same
        console.log(this.props)
        // -> { something: 'something', … }
    }
}

Are there some cases when to use props over this.props ?

Norayr Ghukasyan
  • 1,298
  • 1
  • 14
  • 28

3 Answers3

23

this.props and props are interchangeable in constructor because this.props === props, as long as props is passed to super. The use of this.props allows to detect a mistake instantly:

constructor() {
  super();
  this.state = { foo: this.props.foo }; // this.props is undefined
}

Consistent use of this.props makes it easier to refactor constructor body:

constructor(props) {
  super(props);
  this.state = { foo: this.props.foo };
}

to 

state = { foo: this.props.foo };

Only this. needs to be removed.

There are also typing problems with props in TypeScript, this makes this.props preferable for typed component.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Do you need to duplicate foo? It is not good idea holding the same object in state and props. Why? – JaLe Oct 26 '18 at 09:02
  • 1
    @JaLe Because state may change independently from props. There's a need to set *initial* state, and sometimes it may depend on *initial* props in some way, they won't necessarily be same like in the example. – Estus Flask Oct 26 '18 at 09:08
  • In this way it is true. – JaLe Oct 26 '18 at 09:50
  • BUT be careful when you writing into this foo, you can change (mute) props. – JaLe Oct 26 '18 at 09:54
5

This recommendation exists to prevent you from introducing errors by calling other methods on the object from the constructor, which depend on this.props. You don't want to pass props to these explicitly.

E.g. the following would be a bug, because you call doStuff before super

class MyComponent extends React.Component {    
    constructor(props) {
        this.doStuff()
        super(props)
    }

    doStuff() {
      console.log("something is: " + this.props.something)
    }
}
Jonas Høgh
  • 10,358
  • 1
  • 26
  • 46
2

The correct way is - don`t use props in your constructor - just send into a parent.

But both way is working.

So, there is one special case for reading props in a constructor and it is set default state from props.

In a constructor after call super(props) are this.props and props equals. this.props = props.

Its only about what you prefer, I prefer call always this.props.

Example:

   constructor(props) {
        super(props)
        this.state = {
           isRed: this.props.color === 'red',
        }
   }

Be sure, that you are calling super(props) on the first line in your constructor.

JaLe
  • 409
  • 3
  • 13