Getting memory leak while using useSelector hook in React Native

I am working on an e-commerce mobile application with Node.JS backend and React-Native front end.
I have an auth state called isLogged. Also a material-bottom-tab navigator for navigating between screens. In order to use different navigators in a specific tab(in my case to use account tab for both AccountScreen and LoginScreen) inside my tab navigator I try to reach redux store using useSelector hook.

const loginState = useSelector((state) => state.auth.isLogged);

If the user is logged I dispatch actions and set a specific token.
If he/she wants to logout I delete the token and make the navigations.

I wanted to switch between these two navigators by checking the condition below.

 ACCOUNT: {
    ...(loginState
      ? { screen: AccountNavigator } 
      : { screen: LoginNavigator }),
    navigationOptions: {
      tabBarIcon: (tabInfo) => {
        return (
          <Ionicons
            name={
              Platform.OS === "android"
                ? "md-person-circle-sharp"
                : "ios-person-circle-sharp"
            }
            size={27}
            color={tabInfo.tintColor}
          />
        );
      },
    },
  },

In my first login attemp, I get a memory leak and warns me to use useEffect cleanup functions.
I can logout and re-login without any memory leaks afterwards.

How can I fix this issue ?

Please let me know if I can provide more information to help clarify the problem.

Thanks

Here is my full navigation code:

import React, { useEffect, useState } from "react";
import { createSwitchNavigator, createAppContainer } from "react-navigation";
import { Ionicons } from "@expo/vector-icons";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Platform } from "react-native";

import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetailScreen from "../screens/shop/ProductDetailScreen";
import CartScreen from "../screens/shop/CartScreen";
import CategoriesScreen from "../screens/shop/CategoriesScreen";
import SubCategoriesScreen from "../screens/shop/SubCategoriesScreen";
import SubCategoriesOverviewScreen from "../screens/shop/SubCategoriesOverviewScreen";
import LoginScreen from "../screens/user/LoginScreen";
import SignScreen from "../screens/user/SignUpScreen";
import AccountScreen from "../screens/user/AccountScreen";
import Colors from "../constants/Colors";
import { useSelector } from "react-redux";

export default () => {
  const loginState = useSelector((state) => state.auth.isLogged);

  const defaultNavOptions = {
    headerStyle: {
      backgroundColor: Platform.OS === "android" ? Colors.header : "",
    },
    headerTitleStyle: {
      fontFamily: "open-sans-bold",
    },
    headerBackTitleStyle: {
      fontFamily: "open-sans",
    },
    headerTintColor: Platform.OS === "android" ? "black" : Colors.primary,
  };

  const ProductsNavigator = createStackNavigator(
    {
      ProductsOverview: ProductsOverviewScreen,
      ProductDetail: ProductDetailScreen,
      Cart: CartScreen,
    },
    {
      defaultNavigationOptions: defaultNavOptions,
    }
  );

  const CategoriesNavigator = createStackNavigator(
    {
      Categories: CategoriesScreen,
      SubCategories: SubCategoriesScreen,
      SubCategoriesOverview: SubCategoriesOverviewScreen,
      Cart: CartScreen,
      ProductDetail: ProductDetailScreen,
    },
    {
      defaultNavigationOptions: defaultNavOptions,
    }
  );

  const CartNavigator = createStackNavigator(
    {
      Cart: CartScreen,
    },
    {
      defaultNavigationOptions: defaultNavOptions,
    }
  );

  const LoginNavigator = createStackNavigator(
    {
      Login: LoginScreen,
      Sign: SignScreen,
    },
    {
      defaultNavigationOptions: defaultNavOptions,
    }
  );

  const AccountNavigator = createStackNavigator(
    {
      Account: AccountScreen,
      Cart: CartScreen,
    },
    {
      defaultNavigationOptions: defaultNavOptions,
    }
  );

  const TabNavigator = createMaterialBottomTabNavigator(
    {
      HOME: {
        screen: ProductsNavigator,
        navigationOptions: {
          tabBarIcon: (tabInfo) => {
            return (
              <Ionicons
                name={
                  Platform.OS === "android" ? "md-home-sharp" : "ios-home-sharp"
                }
                size={25}
                color={tabInfo.tintColor}
              />
            );
          },
        },
      },
      CATEGORIES: {
        screen: CategoriesNavigator,
        navigationOptions: {
          tabBarIcon: (tabInfo) => {
            return (
              <Ionicons
                name={
                  Platform.OS === "android" ? "md-menu-sharp" : "ios-menu-sharp"
                }
                size={30}
                color={tabInfo.tintColor}
              />
            );
          },
        },
      },
      ACCOUNT: {
        ...(loginState
          ? { screen: AccountNavigator } 
          : { screen: LoginNavigator }),
        navigationOptions: {
          tabBarIcon: (tabInfo) => {
            return (
              <Ionicons
                name={
                  Platform.OS === "android"
                    ? "md-person-circle-sharp"
                    : "ios-person-circle-sharp"
                }
                size={27}
                color={tabInfo.tintColor}
              />
            );
          },
        },
      },
    },
    {
      activeTintColor: "white",
      activeColor: "black",
      inactiveColor: "gray",
      shifting: true,
      labeled: false,
      barStyle: { backgroundColor: "#D9D9D9" },
    }
  );

  const MainNavigator = createSwitchNavigator({
    Tabs: TabNavigator,
    ShopScreen: ProductsNavigator,
    Login: LoginNavigator,
    Account: AccountNavigator,
  });

  AppContainer = createAppContainer(MainNavigator);
  return <AppContainer />;
};

Source: Ask Javascript Questions

LEAVE A COMMENT