What's the difference between this code:

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

and

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

The difference is the first one has the parentheses and the second one doesn't. Without the parentheses, my app seems to be re-render indefinitely. Can someone kindly explain it to me?

What's the difference between this code:

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

and

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

The difference is the first one has the parentheses and the second one doesn't. Without the parentheses, my app seems to be re-render indefinitely. Can someone kindly explain it to me?

• javascript
• reactjs
• react-hooks

• The different is in first it is not executing the function , it is calling the function . In second , it is executing the function there only. – Harmandeep Singh Kalsi Commented Jul 16, 2020 at 8:33
• 1 At onClick you should not call the function, instead set a function reference. In the first case you write another function inside the onClick which returns a function reference and the second case you call the function directly. Which means your submitHandler function executes before clicking the button. It doesn't wait for the click event. – Sajeeb Ahamed Commented Jul 16, 2020 at 8:34
• An onClick event handler is a function, so that prop is expecting a function, so unless props.submitHandler(searchInputValue) is returning a function, the second line of code is invalid. – M0nst3R Commented Jul 16, 2020 at 8:34
• First example is calling the function and second is executing. Depending on what you do in the submit handler this could cause the indefinite re-rendering. – jd291 Commented Jul 16, 2020 at 8:35

4 Answers 4

In first one:

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

This is arrow function and it will trigger only onClick of the button.

In second one:

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

This is a normal function call , which calls the method as soon the rendering of the component happens.

The first creates a function that calls submitHandler with an argument and assigns that function to onClick.

The second immediately (i.e. during the render step) calls submitHandler with an argument and assigns the return value to onClick.

Remember the fact that a function is assigned to onClick via {} doesn't mean that it will be triggered on html user request. The {} is a compile time action.

Another words: onClick=> {execute what is here at compile time and assign the result into onClick action}

If you have a props.submitHandler() function call inside {} it will be executed and return value assigned to onClick.

If you have a ()=>props.submitHandler it is an arrow function and its execution will be "binded" to onClick user action. Traditional method of doin' it (without using fancy arrow functions) would be

<button onClick={function(){props.submitHandler(searchInputValue)}}>Submit</button>

In first one arrow function returns back a function which is assigned to the onClick

In the second one we call the function when the component renders hence it's not assigned to the onClick handler of the button as function pointer is not returned in the second case.