When to use inline function on button onClick event - Javascript/React.js

Performance

Whether or not you use inline event handler functions it has an impact on the performance of the app.

Inline event handlers are anonymous functions. They are created every time the component renders. That is, every time you call setState or when the component receives new props.

Whenever a component is about to be rendered (when the state has been updated or receives new props,) react performs a shallow comparison between the previous DOM and the new DOM for that component. If they are found to have different props from the props before the state update, then the component will re-render that particular component and all its child components. If not, it assumes the component is the same as the old DOM and so it doesn't render it.

Now inline functions are objects (functions are objects in javascript.) And when react compares functions, it does a strict comparison. The inline function might not have changed in its value, but it is an entirely different function (different reference in memory) and so React detects that there has been a change. And when there is a change, React re-renders the component and all its children.

Again, let me just state that performance decisions are usually largely tradeoffs. This explanation doesn't mean that you should remove all inline event handlers and define them at the class level. This can slow down the first render for your component because of the binding that has to be done in the constructor. There is also this thing called premature optimization which can lead to poor quality of code or it just might not be worth it.

According to the ReactJS documentation:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

The above two lines are equivalent, and use arrow functions and Function.prototype.bind respectively.

In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.

This can be found at the bottom of this link: https://reactjs.org/docs/handling-events.html