Take a look at this code.
export default function MyComponent(props){
function interactWithBackend(){
// Uses a library to interact with a backend server
// Takes in parameters from this component's state/redux store
// Also listens to events and reacts using .on
}
return (
// Some JSX
)
}
Now assume that the function is executed on a button click. The function starts to execute and midway, the state of the component changes. Now I know that this function will be redefined because I am not using the useCallback.
But what happens to the executing instance? Does it stop? Or does JS itself have a special scheduling tool that loads the code once invoked so it doesn't matter?
This is a JS question and it's irrelevant to Reach, the same can happen in Vue, or any other JS function that meets your criteria (called and then re-defined).
When a JS function is called, it'll be executed immediately if it's async, and nothing else can happen until it's finished. So your case isn't possible with a sync function, since by the time Reach notices a change, the function will have finished executing. You can test this by creating a very very long loop with heavy logic that blocks the thread for a few seconds.
If the function is async, it will still execute, even if it was re-defined, since it was already sent to the JS functions queue. It'll wait for its turn and run. The main difference is that the function may be redefined before it runs (by other sync code).
Or does JS itself have a special scheduling tool that loads the code once invoked so it doesn't matter?
That's called The Event Loop. Once something goes in it, it'll eventually run. (I'm trying to simplify a relatively complex system, so I hope I didn't miss anything crucial)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop