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?
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.
Related
I have the following function
function hello() {
alert("hi!");
}
Take this piece of code:
var elem = document.getElementById("btn");
elem.onclick = hello;
My question might be a bit hard to understand, so bear with me:
What EXACTLY differentiates THIS piece of code from a normal call, or what makes this piece of code require a reference to the function variable rather than a regular call? (hello();)
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Well, the onclick property expects a reference to a function, for it to execute when the element is clicked. Normally it's either:
element.onclick = funcRef;
or
element.onclick = function () {
funcRef();
};
(but of course, it's best to use addEventListener and attachEvent)
Notice how both of them are references to functions, not calling.
When something expects a reference, you don't call it...you assign a reference to it (first example).
When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there's still a reference to a function that's assigned to onclick - it's just an anonymous function.
Probably the more important part:
Some people think you want to do this:
element.onclick = funcRef();
But that immediately executes the function (because of the ()), and assigns its return value to onclick. Unless the return value is a function, this isn't what you want.
I think the moral of the story is that when you want/need something to execute right now, you call the function. If the function is wanted for later use or needs stored, you don't call it.
Do you want it to execute NOW? Then call it.
a=hello() means "Call hello() ASAP, and set its return value to a".
On the other hand, a=hello means "a is an alias for hello. If you call a(), you get the same results as calling hello()"
You use the latter for callbacks, etc, where you want to tell the browser what you want to happen after an event occurs. For example, you may want to say "call hello() when the user clicks" (as in the example). Or, "When the AJAX query returns a result, call the callback() function on the returned data".
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Do you need the function to run now?
Than add the () to execute it
Do you need to function to be referenced so it is called later?
Do not add the ().
Pretty much all statements in JavaScript have a return value. Unless otherwise specified, functions in JavaScript will return undefined when called. So, the only context in which it would make sense to call your function in this assignment statement if it were to return a function:
function hello() {
return function() {
alert("hi!");
}
}
elem.onclick = hello();
A reference to your function is needed somewhere no matter how it gets called. The difference here is that you are not explicitly calling the hello function. You are assigning a reference to that function to the elem DOM node's onclick event handler so that when onclick is fired for that Node, your function gets called.
hello() means you call that function, which means the function will be executed directly.
while when you have elem.onclick = hello, this is called a callback. Where hello doesn't get executed directly but only when a certain event is fired (in this case when there's a click on the element)
I have the following function
function hello() {
alert("hi!");
}
Take this piece of code:
var elem = document.getElementById("btn");
elem.onclick = hello;
My question might be a bit hard to understand, so bear with me:
What EXACTLY differentiates THIS piece of code from a normal call, or what makes this piece of code require a reference to the function variable rather than a regular call? (hello();)
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Well, the onclick property expects a reference to a function, for it to execute when the element is clicked. Normally it's either:
element.onclick = funcRef;
or
element.onclick = function () {
funcRef();
};
(but of course, it's best to use addEventListener and attachEvent)
Notice how both of them are references to functions, not calling.
When something expects a reference, you don't call it...you assign a reference to it (first example).
When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there's still a reference to a function that's assigned to onclick - it's just an anonymous function.
Probably the more important part:
Some people think you want to do this:
element.onclick = funcRef();
But that immediately executes the function (because of the ()), and assigns its return value to onclick. Unless the return value is a function, this isn't what you want.
I think the moral of the story is that when you want/need something to execute right now, you call the function. If the function is wanted for later use or needs stored, you don't call it.
Do you want it to execute NOW? Then call it.
a=hello() means "Call hello() ASAP, and set its return value to a".
On the other hand, a=hello means "a is an alias for hello. If you call a(), you get the same results as calling hello()"
You use the latter for callbacks, etc, where you want to tell the browser what you want to happen after an event occurs. For example, you may want to say "call hello() when the user clicks" (as in the example). Or, "When the AJAX query returns a result, call the callback() function on the returned data".
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Do you need the function to run now?
Than add the () to execute it
Do you need to function to be referenced so it is called later?
Do not add the ().
Pretty much all statements in JavaScript have a return value. Unless otherwise specified, functions in JavaScript will return undefined when called. So, the only context in which it would make sense to call your function in this assignment statement if it were to return a function:
function hello() {
return function() {
alert("hi!");
}
}
elem.onclick = hello();
A reference to your function is needed somewhere no matter how it gets called. The difference here is that you are not explicitly calling the hello function. You are assigning a reference to that function to the elem DOM node's onclick event handler so that when onclick is fired for that Node, your function gets called.
hello() means you call that function, which means the function will be executed directly.
while when you have elem.onclick = hello, this is called a callback. Where hello doesn't get executed directly but only when a certain event is fired (in this case when there's a click on the element)
I have the following function
function hello() {
alert("hi!");
}
Take this piece of code:
var elem = document.getElementById("btn");
elem.onclick = hello;
My question might be a bit hard to understand, so bear with me:
What EXACTLY differentiates THIS piece of code from a normal call, or what makes this piece of code require a reference to the function variable rather than a regular call? (hello();)
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Well, the onclick property expects a reference to a function, for it to execute when the element is clicked. Normally it's either:
element.onclick = funcRef;
or
element.onclick = function () {
funcRef();
};
(but of course, it's best to use addEventListener and attachEvent)
Notice how both of them are references to functions, not calling.
When something expects a reference, you don't call it...you assign a reference to it (first example).
When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there's still a reference to a function that's assigned to onclick - it's just an anonymous function.
Probably the more important part:
Some people think you want to do this:
element.onclick = funcRef();
But that immediately executes the function (because of the ()), and assigns its return value to onclick. Unless the return value is a function, this isn't what you want.
I think the moral of the story is that when you want/need something to execute right now, you call the function. If the function is wanted for later use or needs stored, you don't call it.
Do you want it to execute NOW? Then call it.
a=hello() means "Call hello() ASAP, and set its return value to a".
On the other hand, a=hello means "a is an alias for hello. If you call a(), you get the same results as calling hello()"
You use the latter for callbacks, etc, where you want to tell the browser what you want to happen after an event occurs. For example, you may want to say "call hello() when the user clicks" (as in the example). Or, "When the AJAX query returns a result, call the callback() function on the returned data".
How can I know where I'm supposed to give a reference to the function, and when I'm supposed to actually call it?
Do you need the function to run now?
Than add the () to execute it
Do you need to function to be referenced so it is called later?
Do not add the ().
Pretty much all statements in JavaScript have a return value. Unless otherwise specified, functions in JavaScript will return undefined when called. So, the only context in which it would make sense to call your function in this assignment statement if it were to return a function:
function hello() {
return function() {
alert("hi!");
}
}
elem.onclick = hello();
A reference to your function is needed somewhere no matter how it gets called. The difference here is that you are not explicitly calling the hello function. You are assigning a reference to that function to the elem DOM node's onclick event handler so that when onclick is fired for that Node, your function gets called.
hello() means you call that function, which means the function will be executed directly.
while when you have elem.onclick = hello, this is called a callback. Where hello doesn't get executed directly but only when a certain event is fired (in this case when there's a click on the element)
I was studying JavaScript in W3Schools and I encountered with an expression like this:
document.getElementById("myBtn").onclick = function(){displayDate()};
On the right side of the equals sign, there is an anonymous function right? When we don't encapsulate the displayDate() function with an anonymous function it can clickable only once. When I clicked the button more than once it doesen't update the date. So what are the meaning of such functions in JavaScript? I am a real newbie. Can anyone give me a clear explanation about this method? Encapsulating a function with an anonymous function in an onclick event.
Your code should be strictly equivalent to the following:
document.getElementById('myBtn').onclick = displayDate;
because, for a function displayDate whose purpose is simply to display a date, the function function () { displayDate(); } should have the exact same effect as the function displayDate when you call it.
As a consequence, the problem of your date being updated only once should be unrelated to whether or not displayDate is wrapped in an anonymous function. You should look at your definition of displayDate to find the bug.
This is what happens behind the scences: .onclick takes a function which is the callback function for the onclick event listener. As per definition a callback function should be equal to a function. In JS when you put =myfunction() you don't pass the function definition to the variable but what you are doing is passing the value of the execution of the function. So this should throw you an error since .onclick must take a function. To pass the definition of the function you remove the () or put it in function(){myFunc;}
When assigning the function to onclick dynamically, what is the difference between two of the following.
1...
button.onclick=function(){funct(this.value)};
2...
button.onclick=funct(this.value);
where funct is some other function.
Are these two equivalent?
Depends.
If funct(this.value) does something, and you want that something to happen when the button is clicked, then you need #1.
If funct(this.value) returns a function, and you want that function to be run when the button is clicked, you need #2.
No. Unsurprisingly, two things which are different are not the same.
button.onclick=funct(this.value);
Here, the call to funct is evaluated immediately.
button.onclick=function(){funct(this.value)};
Here, the call to funct is deferred until the button's onclick handler is invoked.
The key difference here is that in the second case (in my post, the first in yours) you are assigning a new function to onclick, but in the first, you are assigning the result of calling funct.
This also has consequences for the value of this and value at the times they are invoked.
the seconds example calls the function and assign to the onclick handler the result of the function (so funct has to return a function)
The first one calls funct when the button is clicked.