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, theincreaseQuantity
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 toincreaseQuantity
, but said reference will never be called.onClick={increaseQuantity()}
you are passing the call ofincreaseQuantity
as an argument toonClick
, unlessincreaseQuantity
returns a function, this will either throw an error, not do anything, or both. In this caseincreaseQuantity
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 toincreaseQuantity
, whenever you click the button, the anonymous function will run, which in turn will callinclreaseQuantity
, this has the added benefit that you can pass an argument intoincreaseQuantity
, 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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.