javascript - Passing an arrow function vs passing the function

Question

Say I have a function:

handleChange = (e) => {
  this.setState({ [e.target.id]: e.target.value });
}

What is the difference between the following:

1.

<FormControl value={this.state.password} onChange={this.handleChange} />

<FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} />

Answer 1

The second case an anonymous function is created which executes the handleChange method and and thereby providing it the context.

Everytime the React component renders, a new function is created in the second and not in the first case since the same reference of handleChange method is being provided to the handler.

You might also want to look at how arrow function in render achieve context binding