What's the difference between onClick ={ () => function()} and onClick = {function()}?

Question

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?

Answer 1

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.

Answer 2

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.