asynchronous function in render() method fails (Invariant Violation) - react-native

Question

I'm trying to use an asynchronous function in render():
async _check() {
const token = await AsyncStorage.getItem('myToken');
if(token !== null) {
this.props.navigation.navigate('My Screen', {token: token});
}
else {
return (
<View style={styles.content_container}>
...
</View>
);
}
}
render() {
return (
<View>
{ this._check() }
</View>
);
}
but I'm getting this error:
Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.
Can someone tell me what's wrong with my code ?

Answer 1

You can't use any asynchronous functions or do any sideffects (like navigating) in render. This is directly against React principles. Render should only be rendering elements from props and state. Aside from that, error you are getting is because you are rendering result of async function, which is always a Promise. Also, getting token from AsyncStorage on every render doesn't make sense as render will happen often, up to few times per second
Put your logic into lifecycle methods e.g. componentDidMount, then use this.setState to change state the way you want, and use this.state to render your component in render()
class SomeComponent extends Component {
constructor(props) {
super(props)
this.state = {
message: ''
}
}
async componentDidMount() {
const token = await AsyncStorage.getItem('myToken')
if (token !== null) {
this.props.navigation.navigate('My Screen', { token: token })
} else {
this.setState({ message: 'token is missing' })
}
}
render() {
return (
<View style={styles.content_container}>
<Text>{this.state.message}</Text>
</View>
)
}
}