React Native unmounted screen renders when Redux state changed - react-native

Question

I'm using React Native with Redux. Currently i'm having two screens that uses same redux state. Two screen are on a stack navigation. There is a use effect call in the 1st screen that trigger when the redux state changed. same kind a use effect call is also in the 2nd screen that trigger when same redux state changed. The problem is when i navigate from screen 1 to screen 2 and changed the state, it triggers both use effects.
This is 1st Screen. I'm navigating to 2nd screen using navigation.navigate('LoginScreen')
export default function StartScreen({route, navigation, props}) {
const {loginStatus,user} = useSelector(state => state.auth);
const initialRender = useRef(true);
useEffect(() => {
console.log('use effect');
if (!initialRender.current) {
if (loginStatus === 'success') {
hideDialog();
navigation.reset({
index: 0,
routes: [{name: 'Dashboard'}],
});
} else if(loginStatus === 'failed') {
alert('invalid QR code!')
hideDialog();
dispatch(clearLoginStatus())
}
} else {
initialRender.current = false;
}
}, [loginStatus]);
return (
<Background maxWidth="85%">
<VectorHeading
img={require('../assets/startvector.png')}
marginBottom={50}
/>
<Header>xxxxxxx</Header>
<Paragraph>
The easiest way to start with your amazing application.
</Paragraph>
<Button mode="contained" onPress={() => navigation.navigate('QRScanner')}>
Scan QR
</Button>
<Button mode="contained" onPress={() => navigation.navigate('LoginScreen')}>
Login
</Button>
<Loader visible={visible} hideDialog={hideDialog} />
</Background>
);
.........
This is 2nd Screen
export default function LoginScreen({navigation, props}) {
....
const {isLoggedIn, loginStatus,user} = useSelector(state => state.auth);
const initialRender = useRef(true);
useEffect(() => {
console.log('use effect');
if (!initialRender.current) {
if (loginStatus === 'success') {
hideDialog();
forward();
} else if(loginStatus === 'failed') {
alert('invalid credentials!')
hideDialog();
dispatch(clearLoginStatus())
}
} else {
initialRender.current = false;
}
}, [loginStatus]);
.........
When "loginStatus" changed it rendering useefect functions in both screens and show both alerts that setted inside useeffect.
Any help will be really appreciated.

Answer 1

Try adding another useEffect to clean up when component unmounts,
useEffect(() => {
return () => {
console.log("cleaned up");
};
}, []);