When do I need to use bind() in reactJS and react native

Question

so when I create a class I it ususally look something like this

export default class SettingsIndex extends Component {

  constructor(props) {
    super(props);
    this.state = {
      testValue: 1,

    };
  }

myfunction(){
this.setstate({value: 2)
}
render(){
return(
........

Question 1: To be honest, I am not sure when I really need to have the constructor, in my understanding is that I need to declare the constructor every time a class is receiving props from a parent component, is that assumption correction?

Question 2: see myfunction() in some classes it works without issue, however in some classes I have I get an error saying ```this.myfunction' is undefined and I then I need to bind(this) in the constructor like this

this.myfunction= this.myfunction.bind(this);

I am not sure why in some class this is accessible and not other, any idea?

Good questions: For 1) you don't need the constructor if you are just receiving props, then you can leave it out. Here it's required to set the initial values for `this.state`. 2) It depends on the context of where `this.myFunction` is called. If it is only called from other methods of the same class (for example in the `render` method), the `this` context remains the same. If `this.myFunction` is passed as a callback somewhere else however (maybe as an `onPress` or `onClick` callback to another component for example), it needs to be bound. — azundo, Mar 19 '21 at 05:36

score 0 · Accepted Answer · answered Mar 19 '21 at 05:39

You need to use the constructor only when you need to have some initialisation logic which needs to run before the first render such as initialising refs, state or binding functions. You do not require constructor just beecause your component is receiving props, React itself can do that prop forwarding for you

For your case you can define state as a class initialiser too with proper babel setup and get rid of the constructor

export default class SettingsIndex extends Component {

    state = {
      testValue: 1,

    };

    myfunction(){
       this.setstate({value: 2)
    }

}

Now as far as the question about binding is concerned, you first need to understand how does a function receive its context or this variable.

The this argument to a function call is received as the reference of the object on which the function is called unless the function is defined as an arrow function in which case it inherits the this variable from its surrounding scope or this is explicitly overwritten by use of call, apply or bind methods

For Example, in the lifeecycle meethods of React, the this variable already points to the class instance and calling a function using this.myFunction() will causee the myFunction to receive the context of the class as the object on which it is called is this.

On the other hand when you assign the function to an event handler, you are assigning a reference to it and when the event occurs the function is ccalled on the window reference causing the this to be undeefined and thus nneeding you to use arrow function or explicit bind to supply proper context.

Check this SO post for more details on this keyword

When do I need to use bind() in reactJS and react native

1 Answers1