Does it make sense to execute functions in event handlers async?

Question

Let's say there is a function which is doing some complex/long running stuff:

const somethingMoreComplexSync = value => {
  let stupidString = value;
  for (let i = 0; i < 100000000; i++) {
    stupidString = i % 2 === 0 ? stupidString + "1" : stupidString.slice(0, -1);
  }
  return stupidString;
};

(This function is actually just returns value which was passed as parameter)

Now imagine you want to call this function once you type something in a input field:

const MyComponentSync = () => {
  const handleChange = e => {
    const complexValue = somethingMoreComplexSync(e.target.value);
    console.log(complexValue);
  };

  return (
    <label>
      Sync
      <input onChange={handleChange} />
    </label>
  );
};

So each time you type a character onChange will be triggered, thus somethingMoreComplexSync will be triggered.

This question here is: Does it make any sense to make somethingMoreComplexSync async?

As far as I can imagine events are called async anyway? (Is this true?)

See this codesandbox which also contains an async implementation of the above.

rather use debounce instead of triggerring multiple changes. — Jai, Feb 06 '20 at 10:39
@ysfaran As you said, events are called asynchronously, so making your complex function asynchronous will not save you any time as it is executed by another thread. — robinvrd, Feb 06 '20 at 10:43
@Jai this is just an example. The event could also be `onBlur`, so a debounce wont help in this situation. @robinvrd isn't javascript single threaded? And if you look at the example, no matter where you enter something it's still blocking the UI. That confuses me also. — ysfaran, Feb 06 '20 at 10:47

score 1 · Accepted Answer · answered Feb 06 '20 at 10:54

1

Does it make sense to execute functions in event handlers async?

Being in an event handler is no reason to make code asynchronous.

Let's say there is a function which is doing some complex/long running stuff

Then it may well be sensible to farm the work it is doing out to a Web Worker or similar to take the load off the main event loop … because it is long running not because it has anything to do with events.

See this codesandbox which also contains an async implementation of the above.

There's nothing asynchronous about that. It's wrapped in promises (which are tools to manage asynchronous code), but it is still blocking.

answered Feb 06 '20 at 10:54

Quentin

914,110
126
1,211
1,335

@ysfaran — Quote: "farm the work it is doing out to a Web Worker" – Quentin Feb 06 '20 at 10:56
so what's the point of async functions in JS? Is it only relevant for things like API calls or loading files? I'm truly confused. In my case it is actually about input validation and I don't want to give my validation the chance to block the ui (e.g. prevent user from typing) – ysfaran Feb 06 '20 at 11:02
"so what's the point of async functions in JS?" — Are you asking about functions which are intrinsically asynchronous or are you asking about the `async` keyword? – Quentin Feb 06 '20 at 11:02
"In my case it is actually about input validation and I don't want to give my validation the chance to block the ui (e.g. prevent user from typing)" — Then debounce – Quentin Feb 06 '20 at 11:03
to sum it up: it will never make sense to execute the validations async right (wrapping the result in a Promise)? – ysfaran Feb 06 '20 at 11:10
1

There's no point in wrapping non-asynchronous, blocking code in a promise. It might be use to move blocking code to a web worker (along with an interface that allows for the process to be restarted with new data), and wrap a promise around that. – Quentin Feb 06 '20 at 11:12
regarding first question: what I really mean is, what are the actual use cases to write functions which return promises etc. in web development (beside of calling API etc)? When does it make sense to write an async function because of UI-blocking? Does it make sense at all? – ysfaran Feb 06 '20 at 11:15
"what I really mean is, what are the actual use cases to write functions which return promises etc. in web development (beside of calling API etc)? " — They are only useful when you are calling an API that acts asynchronously. – Quentin Feb 06 '20 at 11:16
1

"When does it make sense to write an async function because of UI-blocking?" – Never. Using `async` doesn't stop a function being blocking. It just wraps it in a promise. – Quentin Feb 06 '20 at 11:16
I will just leave this reference here in case someone is also curious, because that also helped me to understand: https://stackoverflow.com/questions/36588775/are-javascript-promise-asynchronous – ysfaran Feb 06 '20 at 14:12

Does it make sense to execute functions in event handlers async?

1 Answers1