React Native/React Navigation：App.js 无限循环加载

Question

I am building a react native app with react-native-firebase and react-navigation . Here is what I am trying to do in the App.js, the highest component:

1. Check if the user is logged in
2. If the user is logged in, save the user's info. If not, mark as 'nonuser'.
3. If the user's info is valid, load the screen stacks for the app. If 'nonuser, load the screen stacks for login.

Below is the code. However, when I run the code, it is loaded in an infinite loop. I don't see why this one should trigger an infinite loop...any idea on where I went wrong?

 import React, { useState, useEffect, useContext } from "react";
 import Home from "./routes/Home";
 import Login from "./routes/Login";
 import OtherProfile from "./routes/OtherProfile";
 import Post from "./routes/Post";
 import Comments from "./routes/Comments";
 import Wishlist from "./routes/Wishlist";
 import Mypage from "./routes/Mypage";
 import Loginfo from "./context/Loginfo";
 import firestore from "@react-native-firebase/firestore";
 import auth, { firebase } from "@react-native-firebase/auth";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { SafeAreaView } from "react-native-safe-area-context";
 import "react-native-gesture-handler";

 const MainStack = createStackNavigator();

 function MainStackScreen() {
   const { loginfo, setLoginfo } = useContext(Loginfo);
   if (loginfo.loading === true) {
     return null;
   } else {
     return (
       <MainStack.Navigator>
         {loginfo.data !== "nonuser" ? (
           <>
             <MainStack.Screen
               name="Home"
               component={Home}
               options={{ headerShown: false }}
             />
             <MainStack.Screen
               name="Post"
               component={Post}
             />
             <MainStack.Screen
               name="OtherProfile"
               component={OtherProfile}
             />
             <MainStack.Screen
               name="Comments"
               component={Comments}
             />
             <MainStack.Screen
               name="Wishlist"
               component={Wishlist}
             />
             <MainStack.Screen
               name="Mypage"
               component={Mypage}
             />
           </>
         ) : (
           <>
             <MainStack.Screen
               name="Login"
               component={Login}
               options={{ title: null }}
             />
           </>
         )}
       </MainStack.Navigator>
     );
   }
 }

 export default function App() {
   const [loginfo, setLoginfo] = useState({ loading: true, data: null });

   useEffect(() => {
     auth().onAuthStateChanged((user) => {
       if (user) {
         const k = user.uid;
         if (loginfo.data === null) {
           firestore()
             .collection("users")
             .doc(k)
             .get()
             .then((doc) => {
               const j = { ...doc.data(), uid: k };
               setLoginfo({ loading: false, data: j });
             });
         }
       } else {
         setLoginfo({ loading: false, data: "nonuser" });
       }
     });
   }, [loginfo]);

   console.log("loading"); //This one is infinitely repeated...any idea why this is happening?
   return (
     <NavigationContainer>
       <SafeAreaView style={{ flex: 1 }}>
         <Loginfo.Provider value={{ loginfo, setLoginfo }}>
           <MainStackScreen />
         </Loginfo.Provider>
       </SafeAreaView>
     </NavigationContainer>
   );
 }

Answer 1

Please remove dependency loginfo from useEffect

useEffect(() => {
     auth().onAuthStateChanged((user) => {
       ....
     });
   }, []); // remove it from here and use empty `[]`

Answer 2

function format was deprecated , Edit your code like this code , maybe your problem solved:

const screens = createStackNavigator({
  HomePage: { screen: Home },
  Advice: { screen: Advice },
  Search: { screen: Search },
  Categorylist: { screen: Categorylist },
  Product: { screen: Product },
  Basket: { screen: Basket },
  Basket2: { screen: Basket2 },
  Basket3: { screen: Basket3 },
  Orderdet: { screen: Orderdet },
  Moreadvice:{ screen: Moreadvice },
  Pay: { screen: Pay },
  expand_scr: { screen: expand_scr },
}, {
   headerMode: 'none',
});

export default  screens2 = createDrawerNavigator({
  HomePage: { screen: screens },
  Profile: {screen: Profile,
    navigationOptions: {

      drawerLabel:'profile',
      drawerIcon: () => (
        <Image
          source={image.user}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Order: {screen: Order,
    navigationOptions: {
      drawerLabel:'shop',
      drawerIcon: () => (
        <Image
          source={image.choices}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Fav: {screen: Fav,
    navigationOptions: {
      drawerLabel:'lable3',
      drawerIcon: () => (
        <Image
          source={image.wishlist}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Listadvice: {screen: Listadvice,
    navigationOptions: {
      drawerLabel:'lable4',
      drawerIcon: () => (
        <Image
          source={image.list}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  About: {screen: About,
    navigationOptions: {
      drawerLabel:'lable5',
      drawerIcon: () => (
        <Image
          source={image.about}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Contact: {screen: Contact,
    navigationOptions: {
      drawerLabel:'lable6',
      drawerIcon: () => (
        <Image
          source={image.contact}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  
}, {
  initialRouteName: 'HomePage',
  contentComponent: SideMenu,
  headerMode: 'none',
    drawerPosition: 'right',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    drawerWidth: 240
})