If you are like me you will also end up doing a lot of asynchronous work in componentWillMount/componentDidMount. This article will show you how to use Async/Await with React's Lifecycle events. React’s lifecycle methods can return any value, including a promise.
Promise Version
componentDidMount() { fetch('https://example.com') .then((res) => res.json()) .then((something) => this.setState({something})) } Async/Await Version
async componentDidMount() { const res = await fetch('https://example.com') const something = await res.json() this.setState({something}) } Note: if you do return a promise from the lifecycle methods it will be not be awaited.
I personally find the Async/Await version much easier to read.
Full example (React Native)
class AwesomeProject extends Component { state = {}; setStateAsync(state) { return new Promise(resolve => { this.setState(state, resolve); }); } async componentDidMount() { StatusBar.setNetworkActivityIndicatorVisible(true); const res = await fetch("https://api.ipify.org?format=json"); const {ip} = await res.json(); await this.setStateAsync({ipAddress: ip}); StatusBar.setNetworkActivityIndicatorVisible(false); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> My IP is {this.state.ipAddress || "Unknown"} </Text> </View> ); } } 
Top comments (0)