Mounting & Unmounting Process in functional components

Question

I have the following Components and I am confused on how the mounting and unmounting actually works in react/react-native.

const App = ()=>{
  return (
    <SocketContextProvider>
      <NavigationAll />
    </SocketContextProvider>
  )
}

const MyTabs = ()=>{
    const Tab = createBottomTabNavigator();
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen  name ="Mylocal" component={MyLocalStackScreen}/>
            <Tab.Screen name="Chats" component={ChatStackScreen}/> 
            <Tab.Screen name="Profile" component={ProfileStackScreen} />
        </Tab.Navigator>
    )
}
export default MyTabs;

and each Tab in MyTabs is a stack of screens like, for example, Proifle Tab has

const ProfileStack = createNativeStackNavigator();
const ProfileStackScreen = () => {
  return (
    <>
    <ProfileStack.Navigator initialRouteName = "Profiles" screenOptions={{headerStyle:{backgroundColor:bgcolr}}}>
        <ProfileStack.Screen name ="Profiles" component={Profile}/>
        <ProfileStack.Screen name="settings" component={Settings}/>
        <ProfileStack.Screen name='ProfileChange' component={ProfileChange} />
    </ProfileStack.Navigator>
    </>
  )
}

and the SocketContextProvider is

const SocketContextProvider = ({children,data}) => {
    const [socket,setSocket] = useState(null)
    const [currentUser,setCurrentUser] = useState(data)
    useEffect(()=>{
        const clientNewSocket = io.connect("http://10.0.2.2:4000",
        {query:currentUser?._id}
     )
         setSocket(clientNewSocket);
        return ()=>clientNewSocket.close()
    },[currentUser])
  return (
        <socketContext.Provider value={socket}>
            {children}
        </socketContext.Provider>
  )
}

export default SocketContextProvider

so in the above scenario, how does mounting and unmounting of The socketContextProvider work? as far as I know, if I switch from one screen to another screen in one of the stack of the screens, then mounting and unmounting of screens happens. However,

How does mounting and unmounting of Bottom Tabs work? is it similar to the mounting and unmounting of a single screen component within each bottom tab?
How does the SocketContextProvider mount and unmount?
Can the SocketContextProvider unmount while the whole App is mounted? if no, why does a single screen in one of the Bottom Tabs unmount while the whole App is still mounted?
Inside of the SocketContextProvider, should I use return ()=>clientNewSocket.close() or return clientNewSocket.close()? what is the difference between the two?

Mounting & Unmounting Process in functional components

0 Answers0