Is it possible to use async / await in React JS?

Question

I started programming in React Native, and I got used to use the syntax:

async myFunction(){
    ...
    return await otherFunction();
}

But I don't know how to make it compatible with React JS and React Native in a shared package. How can I accomplish this so that it works in both platforms?

Thanks!

Did you look at AsyncStorage in react native official documents? (edit: just noticed this is asked months ago) — eden, Mar 01 '17 at 12:41
@EnieJakiro I don't know how AsyncStorage is related to the question. I do use AsyncStorage but only for React Native. — Santiago Bendavid, Mar 02 '17 at 14:50

Tim Arney · Answer 1 · 2017-03-06T19:08:51.683

49

If you building using create-react-app it's been available since v0.2.3

https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3

It can be used inside a Component like this

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  async componentDidMount() {
    this.setState({ message: 'loading...' });
    let d = await getData('/posts/1');
    this.setState({ message: d });
  }

  render() {
    let { message } = this.state;
    return (
      <div className="App">
        <p className="App-intro">
          { message }
        </p>
      </div>
    );
  }
}

See:

https://github.com/facebookincubator/create-react-app/issues/1024

edited Mar 06 '17 at 19:08

answered Mar 04 '17 at 22:01

Tim Arney

1,776
2
18
23

That's a really good tip. I did not know of this way for building an app. Thank you! – Santiago Bendavid Mar 06 '17 at 12:53
Tim, whats the usage to async the componentDidMount method? – james emanon Mar 07 '17 at 20:37
thanks, but it's not working with arrow functions. I use arrow function to avoid extra line of code for binding `this` in constructor. Any tip on how to make it compatible with arrow functions. I am using CRA – Vaibhav Vishal Jan 17 '19 at 12:10
nvm i was writing `async somefunction = () => { }` instead of `somefunction = async () => { }` – Vaibhav Vishal Jan 17 '19 at 12:17

score 20 · Accepted Answer · answered Jul 13 '16 at 16:47

20

React Native ships with Babel and some Babel presets, whereas React on the web is just React related code.

If you want to use async/await on the web today you'll need Babel and the correct transforms: https://babeljs.io/docs/plugins/transform-async-to-generator/

or the stage-1 presets, which is fairly common in React apps today. http://babeljs.io/docs/plugins/preset-stage-1/

answered Jul 13 '16 at 16:47

azium

20,056
7
57
79

Thanks for your answer @azium. I installed both and after running "npm run dev" I get the error "Unexpected token" for the async function – Santiago Bendavid Jul 13 '16 at 16:53
You're going to have to show more about your project to diagnose.. can you post your package.json and webpack.config.js files? – azium Jul 13 '16 at 17:53
At the end, transform-async-to-generator does work well for React, thanks @azium – Santiago Bendavid Mar 02 '17 at 14:52

Bruno Grieder · Answer 3 · 2017-03-06T14:23:16.893

3

Alternatively you can use Typescript.

Since version 2.1 it is possible to use async/await and directly transpile to ES5 (in other words have it run on ~all browsers)

edited Mar 06 '17 at 14:23

answered Mar 06 '17 at 08:24

Bruno Grieder

28,128
8
69
101

Is it possible to use async / await in React JS?

3 Answers3

Linked