CODEWITHSUNDEEP
javascriptreactjs
Stoodent
Stoodent

Reputation: 155

Please explain simply when/why I need to use bind()

When would I do <CustomComponent function = {this.FunctionName}/>

instead of <CustomComponent function = {this.FunctionName.bind(this)}?

React's documentation mentions that bind() solves this problematic inequality: obj.method(); =/= var method = obj.method; method();. In what way would the second call to method be different from the first? Would it not have access to the instance vars, etc. of the instance of the object it's being called from? Also, what exactly are the arguments in a bind() - namely, is this.FunctionName.bind(this) binding to FunctionName?

Upvotes: 2

Views: 163

Answers (4)

etoxin
etoxin

Reputation: 5264

So the value of this is determined when a function is called. When you call a new function with bind() you are setting the value of this to be the argument of bind eg. myFunction.bind(argument). argument Then becomes this in the function (myFunction).

Before arrow functions became a part of the js spec. This was widely used. It still has value but is less common as Arrow functions do not declare the value of this on invocation and thus don't need .bind(). The value of this does not change.

Upvotes: 0

PiNaKa30
PiNaKa30

Reputation: 664

Simple experiment to understand this:
Make 2 Js files. In first file, define a variable with some value and print it. In second file, change the value of that variable and print again.

File 1: 

let x = 0;  // variable declared here
console.log(x);

File 2: 

x = 2;  // no variable x declared just value change
console.log(x);

Now when you include both files in your HTML page (File 1 before File 2), the output is: 

0  
2

Conclusion: You can access variable in one file from another file on a single page. The variables are common for a page !

Now consider defining something in ReactJs class or method component. Since React is Js library only, you would be able to access functions inside the class without an object of the class ! This will defeat the purpose of abstraction and encapsulation. So, what bind keyword does is, it tells that this function is bound to this class only and cannot be accessed outside it. That is why it is important to bind everything to your component. Otherwise two components using same function name might get confused which function to actually call if you don't bind them.

So, first time when you bind them, use the bind keyword and then use it without bind. Or, you can simply create arrow functions which will auto bind them to the component.

Upvotes: 1

Atin Singh
Atin Singh

Reputation: 3690

Whenever you create a new function (Except an arrow function) you create it's own instance of this. So inside it you can't use the scope of parent's this

Bind creates a new function that will have this set to the first parameter passed to bind().

So if here <CustomComponent function = {this.FunctionName.bind(this)} You pass parent's this.

This is done so that you can reference the state inside a function. If you don't want to use bind then you can just make your functions arrow functions.

Upvotes: 5

Jacob Brazeal
Jacob Brazeal

Reputation: 654

This isn't really about React - just standard JS behavior of this. You should check out a tutorial on it, but in short, in the first side of the inequality, any uses of this will evaluate to obj; in the second case, this might evaluate to anything; for example, if it's called in the global scope, window.

The first argument to bind sets the this object for that instance of this.functionName. If you don't set it explicitly like this, then its internal this will look up the prototype chain in the second case to find obj (or not).

Upvotes: 0

Related Questions