Using () => vs this.something in jsx

Question

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

1. something = {this._onRefresh}
2. something = {() => this._onRefresh}
3. something = {this._onRefresh()}

Where something could be something we are passing to our

1. child component
2. onChange Event
3. onClick event
4. 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

Answer 1

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);
};

Answer 2

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

Answer 3

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.