Is it possible to use async / await in React JS?
Sophia Terry
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!
23 Answers
If you building using create-react-app it's been available since 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:
4React 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:
or the stage-1 presets, which is fairly common in React apps today.
3Alternatively 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)