Can React onClick handlers return a promise?

Question

I was reading some ReactJS code online, and I found a code snippet below.

I was wondering what is the purpose of the IIFE function inside the login function which is executed onClick? Can't we just make the login async and remove the IIFE?

  const login = () => {
    (async () => {
      
      try {
        //OAuth Step 1
        const response = await axios({
          url: `${apiPath}/twitter/oauth/request_token`, 
          method: 'POST'
        });
        
        const { oauth_token } = response.data;
        //Oauth Step 2
        window.location.href = `https://api.twitter.com/oauth/authenticate?oauth_token=${oauth_token}`;
      } catch (error) {
        console.error(error); 
      }
      
    })();
  }

This is how the login was used in the original code:

<img className='signin-btn' onClick={login} alt='Twitter login button'/>

There is no point, you can do this as long as you make `login` `async`. — ggorlen, Jul 13 '22 at 22:37
Does this answer your question? [What are asynchronous functions in JavaScript? What is "async" and "await" in JavaScript?](https://stackoverflow.com/questions/62196932/what-are-asynchronous-functions-in-javascript-what-is-async-and-await-in-ja) — dippas, Jul 13 '22 at 22:38
An event handler shouldn't return anything. An async function returns a promise. An async IIFE inside a vanilla function lets you use await anyway. — jonrsharpe, Jul 13 '22 at 22:39
Sometimes it does matter in React, like `useEffect`'s callback shouldn't be `async` because it's supposed to return a cleanup function, not a promise, but I don't think there's a problem with an `onClick` handler returning a promise except maybe for TS purposes? @ me if I'm wrong please :-) — ggorlen, Jul 13 '22 at 22:39
@dippas yes sir, I was just not understanding why they used nested function in this case but that part is clear now — zxcisnoias, Jul 13 '22 at 22:39
I don't think this should be closed. It's a legitimate question in the context of React, where sometimes you can't make callbacks `async`. Voted to reopen and edited to be clearer. — ggorlen, Jul 13 '22 at 22:43
I dont think this has anything to do with async logic, rather with scope (probably). — Dimitar, Jul 15 '22 at 08:00
@ggorlen, TS does not complain when an `onClick` handler is an `async function`. So, `async function test(){}` followed by `
` is valid. — qrsngky, Jul 15 '22 at 08:12

score 0 · Answer 1 · answered Jul 15 '22 at 07:58

0

Because IIFE is like a box that encapsulates its own code. Therefore, the variables in this box are private, and cannot be accessed or changed by the outside world. And if you accidentally name the variable the same as global, it will not be affected outside.

answered Jul 15 '22 at 07:58

Công Đỗ Chí

13
2

1

But the function is like a box that encapsulates its own code as well, so when the IIFE is removed everything is encapsulated all the same as if the IIFE were present. – ggorlen Jul 15 '22 at 15:02

Can React onClick handlers return a promise?

1 Answers1