Invariant Violation: Maximum update depth exceeded using react Navigation v5 - react-native

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 />;
};

Answer 1

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.

Answer 2

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 !!