#122 Is it possible to use async/await in plain React?

[01abhishekjain]

The answer given is:

If you want to use async/await in React, you will need Babel and transform-async-to-generator plugin. React Native ships with Babel and a set of transforms.

But, you can use it in React, like so:

function App() {
  const click = async function () {
    await Promise.resolve(123);
  };
  return (
    <div onClick={click}>lorem ipsum</div>
  );
}

What am I missing?

[srini-leanfolks]

Yes, we can do it.

[Charlygraphy23]

@01abhishekjain if u install react with create-react-app or vite, it will provide you a template project to play with. And the project already bundled with webpack and babel and you don't have to worry about the configuration of react. In this case you can run react app normally and when you build an app by npm run build, then with the help of babel and other transpilers the code get converted to support all browsers.
Now if you want to create a react project from scratch, you need to mannually create the environment like create a webpack config to provide react run environment or babel.
You can still change the configuration of your react app if you use create-react-app or vite

[Bhanu1776]

Yes, you can do it!

[ArjixWasTaken]

"modern" browsers don't need a polyfil for Promises...
by modern I mean browser versions since ~2017 and most likely even before then

[Yasiralishah21]

Obviously, it is.
Using async/await in React enhances code readability and maintainability. It allows you to write asynchronous code that looks synchronous, making it easier to follow the flow of data fetching and handling. Just remember to define your async functions inside useEffect rather than making the hook itself async.