[FIXED] what is the difference between onClick={function}, onClick={()=>function}, onClick={function()} & onClick={()=>function()}?

Issue

I am confused about the different types of onClick events which are used. Can someone help me in clearing my concepts?

<button onClick={increaseQuantity}>increase</button>

<button onClick={()=>increaseQuantity}>increase</button>

<button onClick={increaseQuantity()}>increase</button>

<button onClick={()=>increaseQuantity()}>increase</button>

<button onClick={()=>increaseQuantity(item)}>increase</button>

<button onClick={increaseQuantity(item)}>increase</button>

When to use which function?
Secondly, if there are any other scenarios that I missed, kindly mention them.

Solution

It is very important to keep in mind that there is a difference between a function call and a function reference, I believe your confusion comes from not knowing which is which.

Besides references, there are also function literals, which are, by all accounts, functions, just like false is a boolean literal and 103 is a number literal, () => {} is a function literal, you said you were aware of arrow functions, so I will not explain that part.

function literals, like any other literal in javascript, can be assigned into a variable, there are many ways to do this, but nowadays, most people do this:

const myFunction = () => {};

now we can call myFunction, like this myFunction();

Ok, so what is the difference between a function reference and a function call? Well, a function reference looks either like this () => <something> or like this myFunction, where myFunction was previously defined at some other point to be a function, this is to say, a function reference is just a way to point to a function, either a function defined into a variable, or a function literal.

A function call, on the other hand, is just a function literal with () added after, where you can pass values for the arguments inside the parenthesis, here are a couple examples of function calls:

console.log('');

myFunction();

(() => {})();

I think the last one is particularly interesting, I wrapped a function literal into some parenthesis and just slapped a parenthesis after the literal, that's a valid way to call a function.

The key takeaway here is that a function literal is as much of a value as anything else in javascript.

if we do something like this:

const myFunction = () => 100;

what do you think will happen if we call typeof myFunction? well, we get the string 'function', on the other hand, if we call typeof myFunction(), we get the type 'number' because that's what the call returns, that is to say, a function call will have evaluate to whatever the function returns.

Last but not least before I answer your question it is important to know that, as functions are just a type of value, there is nothing stopping a function from returning another function:

const functionA = () => 100;

const higherOrderFun = () => {
  return functionA;
};

console.log(higherOrderFun()()); // prints 100

Ok, with that all out of the way, lets look at your actual question.

First of all, you should know that the onClick property expects a function as it's argument.

Assuming increaseQuantity is a void function with no arguments, here is what each example does:

• onClick={increaseQuantity} Nothing weird here, we are passing a function as the onClick property, which expects a function, when you click the button, the increaseQuantity function will be called, which is presumably the expected result.

• onClick={()=>increaseQuantity} You are passing a function that returns another function, your anonymous function will be called, it will return a reference to increaseQuantity, but said reference will never be called.

• onClick={increaseQuantity()} you are passing the call of increaseQuantity as an argument to onClick, unless increaseQuantity returns a function, this will either throw an error, not do anything, or both. In this case increaseQuantity will be called once when the application starts in order to get the actual callback.

• onClick={()=>increaseQuantity()} This will also work, you are passing a callback whose only line is a call to increaseQuantity, whenever you click the button, the anonymous function will run, which in turn will call inclreaseQuantity, this has the added benefit that you can pass an argument into increaseQuantity, which was not possible on this example: onClick={increaseQuantity}, but besides that, they are pretty much equivalent.

The last two examples work the same as the above, but you passed arguments to the function.

Answered By - h8moss

Answer Checked By - Clifford M. (PHPFixing Volunteer)