when to use function() , function or () => function(callback)

Question

I have been searching for a while for a good explanation so its all clear to me. Example:

<Char click={()=>this.onDeleteHandler(index)}/>

vs

<Char click={this.onDeleteHandler()}/>

vs

<Person changed={(event) => this.nameChangedhandler(event, person.id)} />

and

<Char click={this.onDeleteHandler}/>

regarding the third code , here is the property called:

nameChangedhandler = (event, id) => {
const personIndex = this.state.persons.findIndex(p => {
  return p.id === id;
});

// copying the person with the right index
const person = {
  ...this.state.persons[personIndex]
};

// Assigning new name to this person
person.name = event.target.value;

// copying array of persons, then manipulating the correct object of person by using the index
const persons = [...this.state.persons];
persons[personIndex]= person;

this.setState({
  persons: persons
});

}

some aspects are clear to me, but definitely not 100%! So if you can provide me with an explanation, link or similar that would be great!

thanks!

Answer 1

<Char click={()=>this.onDeleteHandler(index)}/>

It passes anonymous function as a callback which - when clicked - triggers onDeleteHandler with extra index parameter (which has to be defined in the scope before).

<Char click={this.onDeleteHandler()}/>

It passes result of onDeleteHandler() as a callback - probably a bad idea - onDeleteHandler function has to return another function that will be invoked on click.

<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />

Looks invalid - will result with syntax error.

<Char click={this.onDeleteHandler}/>

Similar to the first example but doesn't take custom parameters. Default click event will be passed as a first argument for onDeleteHandler

Answer 2

The whole question seems to boil down to what the difference between func and func() and () => func() is. It has nothing to do specifically with React.

If I have a function

function func() {
  console.log(42);
}

Then I can reference the function object itself via func. This is useful if I need to pass the function to another function, e.g. setTimeout:

setTimeout(func, 1000); // calls func after 1000ms

setTimeout expects a function that it can call after the provided timeout.

Similarly in React, click, change etc are all props that expect to be passed a function that is called when the event happens.

---

func() on the other hand calls the function. This needs to be done if you actually need to call function right then and there. This implies that if I do

setTimeout(func(), 1000);

then I would call func first and pass its return value to setTimeout (i.e. I call func now, setTimeout doesn't call it later). So this is usually incorrect unless func returns a function itself and its really the return value I want to pass to the other function.

---

() => func() is just a new function that only calls func. For all intends and purposes it is equivalent to func:

function func() {
  console.log(42);
}

const anotherFunc = () => func();

func();
anotherFunc();

And of course if func expects an argument then I have to pass it along when wrapping it in another function, which is what x => func(x) does.

---

The other part is how functions assigned to object properties and this work. In short, what this refers to inside a (non-arrow) function depends on how the function is called. Doing

this.foo();
// or
var bar = this.foo;
bar();

produces two different results because this.foo() and bar() are two different ways to call the function. For more info see How to access the correct `this` inside a callback?