React Native component callback functions

Question

In components, I\'ve seen different way of doing callbacks. What is the difference between:

 {doSomething(data)} }>
         


        

Answer 1

<MyButton onPress={ () => {doSomething(data)} }>

Is calling a new anonymous function onPress, which will run doSomething.

<MyButton onPress={ this.doSomething.bind(this) }>

Is calling a reference to a named function, that you have already defined in your class. The binding to this is required only when you are working with class function (I mean, non ES6 arrow function).

const doSomething = () => { ... }

Would not require a .bind(this), since arrow functions bind on lexical scope.

You should definately read over What is the best and most efficient way to bind callbacks in ReactJS? In the constructor or in the render method or as a property initializer?

Answer 2

<MyButton onPress={ () => {doSomething(data)} }>

This code block uses the ES6 Arrow function; which is another way of declaring a function in javascript. Also, the scope of this in arrow function depend where the function was created as opposed to normal scoping rule of this which by default depends on how the function was called.

<MyButton onPress={ this.doSomething.bind(this) }>

This statement makes a call to doSomething method. But since the event registration is done on different element, the Scope of doSomething is different and is forcefully binded by using bind method in javascript.

Also, in the second method you are not passing the data parameter, which you can pass using the second argument to the method like shown below.

<MyButton onPress={ this.doSomething.bind(this, data)} }>