Using () => vs this.something in jsx

Question

I am trying to comprehend when do we use something like in jsx of our react

something = {this._onRefresh}
something = {() => this._onRefresh}
something = {this._onRefresh()}

Where something could be something we are passing to our

child component
onChange Event
onClick event
Any other situation you can think about

Where our ._onRefresh() could be

._onRefresh = () => {
  //changes state of our react component 
  //Call redux action
  //call other functions
}

or In case of forms, it takes in event which triggered it

  ._onRefresh = (event) => {
      //takes target value to search inside the data 
      //Store data in the backend
    }

Can someone please explain me when do we need to use which one? will help me a lot in clearing my fundamentals of react and javascript

@Quentin although the `this` is included in his question, I think he is asking something more than just how `this` works — quirimmo, Dec 18 '18 at 13:53
The question was dupe-hammered. https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work is a related question but it doesn't answer this question. — Estus Flask, Dec 18 '18 at 13:56
The question lacks https://stackoverflow.com/help/mcve . The answer depends on what `onRefresh` is expected to be equal to. — Estus Flask, Dec 18 '18 at 13:58
Given that `_onRefresh` is an instance property (and an arrow function) the only option that would work is (1). (2) - you never call the function. (3) you call the function immediatelly. — Yury Tarabanko, Dec 18 '18 at 14:08

score 3 · Accepted Answer · answered Dec 18 '18 at 14:01

The points 1/2 and 3 are actually totally different.

Your point 3 executes a function and assigns the returning value to the something.

Your examples 1/2 assign a function to something

The case 3 could be used when for example you have the disable attribute, and you want to assign the returning true/false of a function.

The points 1 and 2 are assigning a function to the attribute, like for example with onClick attribute, which accepts a callback to be called on click.

The difference between the first and the second point is that if you put that code inside the render method, the second point creates a function for every render, which is not the best for performances.

Using the first point, you should pay attention on how you define the method for the reference of this inside the method.

If you define the class method as:

myMethod() {
  console.log(this); // it will be undefined by default
}

Then you need to bind the this inside the constructor if you want to access this inside the method:

this.myMethod = this.myMethod.bind(this);

If you define the method as arrow function, it will keep the value of the this inside the method, so no need of the bind:

myMethod = () => {
  console.log(this);
};

Not to say that 2 is likely wrong because `_onRefresh` is only accessed w/o being called :) — Yury Tarabanko, Dec 18 '18 at 14:03
@YuryTarabanko :D I was assuming that his question was actually the difference in React between having an attribute assigned to a function vs an arrow function which calls the function vs a function call — quirimmo, Dec 18 '18 at 14:06

score 1 · Answer 2 · answered Dec 18 '18 at 13:52

1

1- you are passing a function as a property to this component

2- you are creating a new function and passing it as a property to this component

3- you are passing the result (output) of calling _onRefresh as a property to this component

answered Dec 18 '18 at 13:52

Kabbany

419
2
7

Estus Flask · Answer 3 · 2018-12-18T14:25:49.867

Option 1 is valid if _onRefresh is actual callback function that should be passed via a prop:

_onRefresh = () => console.log('refresh');

...

<Component onRefresh={this._onRefresh}/>

Where Component uses onRefresh like:

// do refresh
props.onRefresh();

Option 2 is valid if _onRefresh is actual callback function, and onRefresh prop is expected to be higher-order function by a component that accepts a callback:

_onRefresh = () => () => console.log('refresh');

...

<Component onRefresh={() => this._onRefresh}/>

Where Component handles onRefresh like:

// do refresh
const refreshFn = props.onRefresh();
refreshFn();

Option 3 is valid if _onRefresh is higher-order function that returns another function, and this is expected by a component that accepts a callback:

_onRefresh = () => () => console.log('refresh');

...

<Component onRefresh={this._onRefresh()}/>

Where Component handles onRefresh like:

// do refresh
const refreshFn = props.onRefresh();
refreshFn();

Scenarios in options 2 and 3 are much less probable because they don't have much uses in this particular case in React.

In this case option 1 is likely correct because _onRefresh does not return another function and is not expected by child component. Option 2 is a mistake that will result in _onRefresh being never called. Option 3 is a mistake that will result in _onRefresh being called instantly and undefined is not a function error later or, even worse, erroneous behaviour with no error.

Using () => vs this.something in jsx

3 Answers3