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!

Does this answer your question? [function() vs function issue in javascript onClick](https://stackoverflow.com/questions/60152178/function-vs-function-issue-in-javascript-onclick) — pilchard, Feb 23 '22 at 23:45
(The above isn't react specific, but neither is your question. This is just a matter of whether you're assigning a function or the return value of a function) — pilchard, Feb 23 '22 at 23:46

Someone Special · Accepted Answer · 2022-02-24T00:01:23.750

In the original post, there's already a post on function() vs function.

In summary (and in layman terms), though, there are 2 ways on how you handle onClick.

When you want to pass some value to the function

//the button
<button onClick={() => myFunction('I am a click')}>Button</button>


//the function
const myFunction = (value) => {
     console.log(value) //prints 'I am a click'
}

When you do NOT need to pass any value (events/default props will be passed by default)

//the button
<button onClick={myEvent}>Button</button>


//the function
const myFunction = (event) => {
     console.log(event) //prints the button element
}

Creating a custom Button component with custom props.

const MyButton = ({ onClick }) => {
   const customOnClick = () => {
       onClick('Somebody', 'Special'); //we call the onclick here
   }   

   return <button onClick={customOnClick}>Click Me</button>
}

const App =() => {

   //the onClick in MyButton component actually triggers this function.
   const onClick = (value, value2) => {
       console.log(value,value2) //prints "Somebody Special"
   }
   return (<MyButton onClick={onClick} />) // i do not need to specify the props to pass
}

Andy · Answer 2 · 2022-02-24T00:21:47.780

<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.

Onclick calling functions diffrences

2 Answers2

Creating a custom Button component with custom props.

Linked

Related