I am trying to wrap my head around the idea that a function called from an event handler like onClick is considered a callback function?
For example if I have "onChange={this.handleChange}" which calls a class function called handleChange(), why is handleChange a callback here? My understanding is that a callback is a function that is passed into ANOTHER function as a parameter? Am I missing something? Thank you.
this.handleChange does indeed get passed as an argument to a function, just not in your code. React takes care of calling domElement.addEventListener('click', this.handleChange) for you.
"Callback" is also a generic term for a function that is called when a given event occurs. Often these functions are passed in as parameters to other functions, because they allow the function being called to "notify" the caller when something happens. In this case, the event is the click, and the callback is the function executed when the click occurs.
My understanding is that a callback is a function that is passed into ANOTHER function as a parameter?
That is exactly correct. More generally it is a function that you pass to some other piece of code that will "call back" to your function when something happens.
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
The above is from MDN web docs.
Since the function is being called in response to an event being detected, it is passed as an argument to event handler. An event handler is a function called when an event (click) happens.
Related
when trying to call this function onClick,
function changeProfile(e){setProfilePic(e)}
when I use
onClick={changeProfile(props)}, it calls the function whenever the page is loaded, and doesn't work properly as it calls all the props at once even the ones that are not called.
onClick={()=>{changeProfile(props) this works exactly how I imagined, calling only the component that is clicked. What is the difference between the two and when do I use the specific method of {()=>function}??
I know that it works now, but what is the exact difference between the two?
onClick={()=>{changeProfile(props) will register an event handler to the click event.
onClick={changeProfile(props)} will run when it is encountered in the code. This is why it occurs on the page load.
Trying to figure out how this references resolve to the lexical context when using arrow functions as callback functions. My suspicion is the this references in the body of the callback function are resolved before the method is invoked. I.e., before the arrow function is passed as an argument (rather than at each iteration for example if the method is forEach()). But I can't seem to find anything definitive on this. I did attempt to log the passed function but writing my own forEach() function thinking I could capture the difference between a passed arrow function and a passed non-arrow function. But the func parameter, converted to string for log purposes, revealed essentially nothing - show this still in the function (unresolved).
We can refer to the language specification that states that an arrow function gains knowledge of the value of this during its instantiation: https://262.ecma-international.org/12.0/#sec-runtime-semantics-instantiatearrowfunctionexpression
Whenever I pass function parentheses in onClick of button, it automatically calls when page loads even without clicking on button.
But when I don't pass function parentheses in onClick of button, it calls only when button is clicked.
With passing parentheses in function call
<button onClick={this.handleButtonClick()}>Increment</button>
Without passing parentheses in function call
<button onClick={this.handleButtonClick}>Increment</button>
Why function called automatically on page load whenever I pass parentheses to function even-though it is written inside onClick of button ?
There's a difference between a function call and a function.
When a component renders, all statements are executed and expressions are evaluated. It's plain javascript, that's how javascript works.
this.handleButtonClick() is a function call, and therefore the function will be called once the component renders. I assume that handleButtonClick() returns undefined which will cause the button to render as <Button onClick={undefined} />. Now, if onClick is undefined, nothing will happen when the click actually happens as there is no function to be called.
this.handleButtonClick is just a reference to a function, it doesn't invoke it. You need to pass the function reference to onClick prop so that it can be called later by React, once the click actually happens.
It automatically calls because you are invoking it immediately by:
this.handleButtonClick()
"onClick" does not work like that, if you want to manually invoke the function you can use:
onClick={() => this.handleButtonClick()}
This is done automatically if you use function reference. Hence, you don't need to invoke it or use a callback function. Actually, using function reference is better since that function isn't recreated in every render.
There is a difference between function reference and function invoking.
When you set the dynamic value like:
this.handleButtonClick()
that means you're invoking the function as soon as the component renders to the page.
But when you just pass the reference of the function like
this.handleButtonClick
that means React will call this function only when the user clicks on it.
JS will execute the function On each Render when you do OnClick(Func(params))
because you are calling a function instead of passing it.
Do this instead :
OnClick ( ()=> {Func(params) } )
In react functional components, if we pass any function to onclick this way.. onClick={func()} this func will be called right away when the page is loaded, that for sure we don't want.
So we have two ways to make it work right.
one, pass it as a reference like this- onClick={()=> func()} (this means only pass reference to that function when page loads, but call that func() if component is clicked over.)
second, just pass the name of the function- onClick={func} (this means both pass reference and call on Call).
these both things work the same way. second one is more easy however the former one is used the most.
I am doing a react tutorial and I see this code:
So I guess we need to just supply a function to the onChange field... not actually call it. That's why we don't need to pass event to the function when it itself is being passed to onChange right? What is onChange called btw? Does it have a name in react?
I guess whatever function we pass to onChange, React attempts to pass the event to it right?
Yes. Basically React creates its own SyntheticEvent wrapper over original event (it has almost the same API as original one) and passes it to your event handler as first argument. Also you are correct about passing a function without calling it, React will call it for you on event.
Here it is written:
Included is a type CallbackTo[A] which captures effects designated for
use in React callbacks.
What is a React callback in this context ?
As far as I know, just the normal meaning of callback - a function that is called in response to an event. So for example in a React Component there are many functions like componentDidMount that are called at different stages in the lifecycle of the component. In scalajs-react these are implemented as functions that return a CallbackTo[Unit], which can also be written as Callback due to a type alias. For example when adding a componentDidMount callback to a ReactComponentB, we use def componentDidMount(f: DuringCallbackM[P, S, B, N] => Callback): ReactComponentB[P, S, B, N].
In javascript a component is expected to just immediately run any side-effects of the event, in the componentDidMount function (or the other callbacks). In scalajs-react, the component instead wraps these effects in a Callback, and returns that. This allows for the scalajs-react system to delay actual execution of the code in the Callback - this is done later by calling runNow(). This also means that Callbacks are combined using map, flatMap, >> etc. They will not run unless runNow() is eventually called, so if you are not returning a Callback to some other code to execute later, just creating it will do nothing.
There's much more about Callback in the docs.