Invariant Violation: Maximum update depth exceeded using react Navigation v5

Question

I have a login screen which I have placed in stack. After user logs in successfully he is redirected to home screen which is a drawer screen. One of the options of drawer screen is logout, so on click of it user should be logged out. Following is my code for logout screen. I am just showing a progress bar in logout screen in ui but in useEffect hook, I am calling the following code

navigation.reset({
   routes: [{name: LOGIN_SCREEN}],
});

I also tried calling the above method in useLayoutEffect but then the logout button just hangs.

My Navigation stack looks something as follows

<Stack.Navigator>
    <Stack.Screen
      name={LOGIN_SCREEN}
      component={LoginScreen}
      options={{headerShown: false}}
    />
    <Stack.Screen
      name={HOME_STACK_SCREEN}
      component={DrawerStack}
      options={{headerShown: false}}
    />

    // ...

</Stack.Navigator>

My drawer component as follows

<Drawer.Navigator
  drawerStyle={{backgroundColor: BLUE_COLOR_1}}
  drawerContentOptions={{labelStyle: {color: '#FFF'}}}
>
    <Drawer.Screen
      name={HOME_SCREEN}
      component={Home}
      options={{
        // ...
      }}
    />
    <Drawer.Screen
      name={LOGOUT_SCREEN}
      component={Logout}
      options={{
       // ...
      }}
    />

    // ...

</Drawer.Navigator>

Following is my logout component

const Logout = ({navigation}) => {
    async function logout() {
        try {
            await AsyncStorage.clear();
            navigation.reset({
                index: 0,
                routes: [{name: LOGIN_SCREEN}],
            });
        } catch (e) {
            Alert.alert(e.toString());
            console.log(e.toString());
        }
    }

    useEffect(() => {
         logout();
    }, []);

    return <ProgressBar />;
};

Why do you want Logout component? Just use drawerContent to render a custom one with logout and do the reset. — Ashwin Mothilal, Mar 04 '20 at 15:06
@AshwinMothilal but how to do with React Navigationv5. All the solutions online show how to do it with v4 or previous. I cant find anything related to docs about this in v5 — BraveEvidence, Mar 05 '20 at 07:30

score 0 · Answer 1 · edited Mar 06 '20 at 21:46

0

Invariant Violation: Maximum update depth exceeded using react Navigation v5 occurs when something going in an infinite loop

navigation.reset({
    routes: [{name: LOGIN_SCREEN}],
});

When you say you put the above code in useEffect, I suspect that hook is getting called multiple times.

edited Mar 06 '20 at 21:46

Linschlager

1,539
11
18

answered Mar 02 '20 at 05:22

Maulik Dhameliya

1,470
1
17
21

1

but I have put empty array in my useEffect which calls it only once useEffect(()=>{navigation.reset({ routes: [{name: LOGIN_SCREEN}], });},[]) – BraveEvidence Mar 02 '20 at 06:33
Have you put this effect in Login_screen itself? – Maulik Dhameliya Mar 02 '20 at 07:20
I have put this in logout screen. why would I put it in login? @maulikdhameliya – BraveEvidence Mar 02 '20 at 07:47

score -1 · Answer 2 · answered Mar 06 '20 at 07:26

I saw you code, to be honest it does't look good to me if we think of auth flow, Here are reason why I am saying this. Do check this link step by step , you get to know how simply you can achieve this auth flow in proper manner. React Navigation Auth Flow, this problem comes when we try to navigate screen from android back button , user can go back to login after you navigate user to home page on success login

Second you can try one condition in you current code.

You need to check one condition before calling the logout function in you screen

useEffect(()=>{
 if(check if user value if still there in async storage ) {
 **Here you can excute you code for log out **
 }
}

And instead of using reset action from navigation use popToTop , Here you can find the ref how you can us PopToTop or use this

navigation.popToTop()

Cheers !!

Invariant Violation: Maximum update depth exceeded using react Navigation v5

2 Answers2