async SetState in componentDidMount() warning in React Native

Question

The warning message says:

"Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op."

The code caused it:

async componentDidMount() {
  const token = await AsyncStorage.getItem('google_token');

  if (token) {
    this.props.navigation.navigate('feed');
    this.setState({ token });
  } else {
    this.setState({ token: false });
  }
 }

After some google, I'm really confused on if I should be worried about this warning. How can I get the warning message away without disabling the rule like this Github issue suggested ?

Answer 1

I think the issue is that you're navigating to 'feed' then updating the state on this component. It might be a better idea to update the state first then navigate once its completed:

async componentDidMount() {
  const token = await AsyncStorage.getItem('google_token');

  if (token) {
    this.setState({ token }, () => this.props.navigation.navigate('feed'));
  } else {
    this.setState({ token: false });
  }
 }