skip to Main Content
      <div
        onClick={async (e) => {
          await api_call();
        }}
      />
      <div
        onClick={(e) => {
          api_call();
        }}
      />

What would be the difference of the 2 above? The api_all is the last line of the callback, so is there any difference at all?

2

Answers


  1. If a function uses async await for handling when being invoked, it can make the function execute synchronously. However, the effect is the same in click events, and asynchronous functions do not exist in the environment of another function.

    Login or Signup to reply.
  2. I think this is an interesting question.

    What I know is that eslint has a rule called no-return-await. What it does is to check if there is an await after the return

    It says

    Using return await inside an async function keeps the current function in the call stack until the Promise that is being awaited has resolved, at the cost of an extra microtask before resolving the outer Promise. return await can also be used in a try/catch statement to catch errors from another function that returns a Promise.

    You can avoid the extra microtask by not awaiting the return value,
    with the trade off of the function no longer being a part of the stack
    trace if an error is thrown asynchronously from the Promise being
    returned. This can make debugging more difficult.

    Without return it is probably the same thing. The function that calls await api_call() would remain in the call stack

    If the function was like that

    async (e) => {
       await api_call();
       console.log('after api_call')
    }
    

    Then that function would remain in the call stack, other way it would not be possible to call the console log after finishing api_call

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search