Onclick calling functions diffrences

Question

can I am on working on a react project and I was wondering what is a difference between different onClick function calling ,meaning:

<Button onClick={function}> 
<Button onClick={function()}>

<Button onClick={()=>function()}>
<Button onClick={()=>function}>

I have seen multiple methods but I still can't get a grap on the core of their differences,thanks!

Answer 1

<Button onClick={function}>

Assigns the reference of a declared function to the click listener. This is preferable.

<Button onClick={function()}>

Assigns the result of calling the function to the click listener. You probably don't want to do this unless the function returns a function of its own, also known as a closure.

<Button onClick={() => function()}>

This is basically the same as the first example but in React this function expression is defined each time the component is rendered so you may have some performance issues if your app scales. The first example is preferable.

<Button onClick={() => function}>

Doesn't do anything useful. Avoid.