Unable to figure out the source of the error - react native - reactjs

Question

I am developing react-native app for quite sometimes. During my development, almost everyday i am facing some error/warning. Among them, the most comment error I've faced is this-> Warning: Can't perform a React state update on an unmounted component. I've searched everywhere, but couldn't find a proper solution. And this log also not explaining that much. So is there anyone who can explain this which will be much more understandable, or point me out where should I dig into to solve this error or what more should I study to understand the situation. Here is the full screenshot of this error.
. And Here is the some code of one of my component:
//packages
import React, { useContext, useEffect, useState } from 'react';
import { ActivityIndicator, ImageBackground, Pressable, StyleSheet, Text, View } from 'react-native';
// third pirty packages
import { Button, HamburgerIcon, Menu, NativeBaseProvider, useToast } from 'native-base';
import Feather from 'react-native-vector-icons/Feather';
import Foundation from "react-native-vector-icons/Foundation";
import NetInfo from "#react-native-community/netinfo";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
listenOrientationChange as lor,
removeOrientationListener as rol
} from 'react-native-responsive-screen';
//assets and components
import { AuthContext } from './../context';
const MainBody = (props) => {
const { signOut } = useContext(AuthContext);
const [isLoading, setIsLoading] = useState(false);
const toast = useToast();
useEffect(() => {
lor();
return () => {
rol();
};
}, []);
const styles = StyleSheet.create({
wrapperView: {
height: hp('87%'),
paddingTop: hp('7%'),
alignItems: 'center',
backgroundColor: '#fff'
},
dashboardView: {
width: '80%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: hp('3%')
},
dashboardCategory: {
width: '45%',
height: hp('20%'),
borderRadius: 5,
elevation: 5,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#FFFFFF'
},
iconStyle: {
color: 'grey',
fontSize: hp('5%'),
alignSelf: 'center'
},
buttonText: {
marginTop: 10,
color: '#4b2e80',
width: '100%',
textAlign: 'center',
fontSize: hp('2.7%')
},
headerButtonView: {
position: 'absolute',
top: hp('3%'),
right: wp('5%')
}
});
return (
<View>
<View style={styles.wrapperView}>
<View style={styles.dashboardView}>
<Button light style={styles.dashboardCategory}>
<Feather style={styles.iconStyle} name="users" />
<Text style={styles.buttonText}> Clip </Text>
</Button>
<Button light style={styles.dashboardCategory}>
<Foundation style={styles.iconStyle} name='pound' />
<Text style={styles.buttonText}> Balancing </Text>
</Button>
</View>
</View>
<View style={styles.headerButtonView}>
<Menu
trigger={(triggerProps) => {
return (
<Pressable accessibilityLabel="More options menu" {...triggerProps}>
<HamburgerIcon color="#fff" />
</Pressable>
)
}}
>
<Menu.Item onPress={() => signOut()}>Logout</Menu.Item>
</Menu>
</View>
</View>
);
}
export const DashboardScreen = ({ navigation }) => {
return (
<NativeBaseProvider>
<MainBody navigate={navigation.navigate} />
</NativeBaseProvider>
);
}

Answer 1

we need to unsubscribe the particular subscription before our components unmounts. it's a workaround but will get rid of the error.
useEffect(() => {
let mounted = true
if(mounted){
lor();
}
return () => {
rol();
mounted= false
};
}, []);