This is returned from an arrow function component in some code written by a Udemy instructor (deleteAccount() is a Redux action creator brought in from another file):
<button onClick={() => deleteAccount()}>Delete My Account</button>
What's the difference, if any, between passing the function that way and as a reference as done below?
<button onClick={deleteAccount}>Delete My Account</button>
There will be a performance issue when you execute
<button onClick={() => deleteAccount()}>Delete My Account</button>
as every time render() is called, it will create a new anonymous method which will delete the account. Also, with the above approach, if you want to use event object explicitly given by the onClick method, you need to modify your code as
<button onClick={(event) => deleteAccount(event)}>Delete My Account</button>
Whereas, when you use
<button onClick={deleteAccount}>Delete My Account</button>
assuming you are using either the bind method in constructor or using the arrow operator, the anonymous function is not created every time render method is called, but created only once and used. This improves performance. Also, the other aspect, all the parameters passed from the onClick method will be passed to the method directly.
onClick={deleteAccount} is not an arrow function and it's not {this.deleteAccount}<button onClick={() => deleteAccount()}>Delete My Account</button>
in above code you are passing click event handler function to onclick which make call to deleteAccount function, while in below code
<button onClick={deleteAccount}>Delete My Account</button>
you are directly passing deleteAccount as click handler to component. you can use the first one when you want to process event object before calling deletedAccount and second one when you want directly call deleteAccount.
onClick={deleteAccount},deleteAccountwill receive theeventobject as a parameter. If the function uses the parameter thinking it's the account object or something like that, it could create a funky bug to track down.