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?

Answer 3

Generally you would make use of inline arrow functions when you need to bind he handler to the context or to provide custom parameters

In

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

onDeleteHandler is bound to the context where Char is rendered and is passed a custom parameter index. Since a new function is returned to click , it can be executed from within Char like this.props.click()

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

Here the onDeleteHandler is evaluated and the value is returned to the click prop

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

Here the syntax is invalid, it should probably be

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

In which case, it takes the default parameter and pass it along with the custom parameter to nameChangedHandler and it also performs binding

<Char click={this.onDeleteHandler}/>

just assigns the reference of onDeleteHandler to click and whenever you invoke click, onDeleteHandler will be called with the parameters that you pass while invoking click and the context within onDeleteHandler will refer to the context from where it is invoked unless you bind onDeleteHandler using arrow function or in constructor