реагировать на встроенную навигацию после проверки authStatechanged с помощью firebase

Question

Я пытаюсь запустить мое приложение на загрузочном экране, где оно будет проверять, есть ли сеанс с firebase, вот код, который я пробовал так много версий, но ничего не работает, что, на мой взгляд, является недостатком понимания возможностей в JS

версия 2

//importing 
import {f,fAuth} from '../../config'

class Loading extends React.Component {
componentDidMount(){

        f.auth().onAuthStateChanged((user)=>{console.log(user);this.nav(user) })

    }

    nav(user)
    {   
        console.log(user)
        if (user===null){
            console.log(user)
            // to login page
            this.props.navigation.navigate('auth')
        }
        else{
            console.log(user)
            // to home page
            this.props.navigation.navigate('main')
        }
    }
}

версия 1

componentDidMount(){
        f.auth().onAuthStateChanged(user=>{th.props.navigation.navigate(user ?'main':'auth')})    
    }

в файле конфигурации

import firebase from 'firebase';

var firebaseConfig = {
    apiKey: "AIzaSyDYcY1wXll4JI3Gb-qokG6F6KQZB5zzrkg",
    authDomain: "insta-12594.firebaseapp.com",
    databaseURL: "https://insta-12594.firebaseio.com",
    projectId: "insta-12594",
    storageBucket: "insta-12594.appspot.com",
    messagingSenderId: "898455527488",
    appId: "1:898455527488:web:6a749552a9401905de0eec5"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig)

export const  f = firebase;
export const fDb= firebase.database()
export const fAuth= firebase.auth()

Answer 1

после нескольких попыток с использованием state, я заметил, что состояние не обновляется сразу. Пример:

state={
      userState:'ha'
      }  

componentDidMount(){
      console.log('up',this.state.userState)
      f.auth().onAuthStateChanged(user=>this.setState({ userState: 'hi' }, () => 
                                       console.log('middle',this.state.userState)))
      console.log('bottom',this.state.userState)
    }

вывод будет:

up ha
down ha
middle hi

Зная этот факт, я пытался вызвать функцию в обратном вызове this.setState Как это:

state={
      userState:'ha'
    }  
componentDidMount(){
      f.auth().onAuthStateChanged(user=>this.setState({ userState: user }, () => 
       this.props.navigation.navigate(this.state.userState===null?'auth':'main')))     
    }

Answer 2

Вы можете сделать что-то вроде

class Loading extends React.Component {

componentDidMount(){
   this.authSubscriber = f.auth().onAuthStateChanged(this.authListener)
}


componentWillUnmount() {
  if (this.authSubscriber) {
    this.authSubscriber();
  }
} 

authListener = async user => {
  if (!user) {
    this.props.navigation.navigate('auth');
  } else {
    this.props.navigation.navigate('main');
  }
};


render(){
   return (
      <View>
          <Text>Loading...</Text>
      </View>
   )
 }
}