useEffect not called in React Native when back to screen
ReactjsReact NativeUse EffectReactjs Problem Overview
How are you. This is scenario of this issue. Let's say there are 2 screens to make it simple.
-
enter A screen. useEffect of A screen called.
-
navigate to B screen from A screen
-
navigate back to A screen from B. at this time, useEffect is not called.
function CompanyComponent(props) { const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id) useEffect(()=>{ // this called only once when A screen(this component) loaded, // but when comeback to this screen, it doesn't called setRoleID(props.user.SELECTED_ROLE.id) }, [props.user]) }
So the updated state of Screen A remain same when comeback to A screen again (Not loading from props)
I am not changing props.user in screen B.
But I think const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id)
this line should be called at least.
I am using redux-persist. I think this is not a problem. For navigation, I use this
// to go first screen A, screen B
function navigate(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params,
})
);
}
// when come back to screen A from B
function goBack() {
_navigator.dispatch(
NavigationActions.back()
);
}
Is there any callback I can use when the screen appears? What is wrong with my code?
Thanks
Reactjs Solutions
Solution 1 - Reactjs
Below solution worked for me:
import React, { useEffect } from "react";
import { useIsFocused } from "@react-navigation/native";
const ExampleScreen = (props) => {
const isFocused = useIsFocused();
useEffect(() => {
console.log("called");
// Call only when screen open or when back on screen
if(isFocused){
getInitialData();
}
}, [props, isFocused]);
const getInitialData = async () => {}
return (
......
......
)
}
I've used react navigation 5+ > @react-navigation/native": "5.6.1"
Solution 2 - Reactjs
When you navigate from A to B, component A is not destroyed (it stays in the navigation stack). Therefore, when you navigate back the code does not run again.
Perhaps a better way to acheive what you want to to use the navigation lifecycle events (I am assuming you are using react-navigation
) I.e. subscribe to the didFocus
event and run whatever code you want whenever the component is focussed E.g
const unsubscribe = props.navigation.addListener('didFocus', () => {
console.log('focussed');
});
Don't forget to unsubscribe when appropriate e.g.
// sometime later perhaps when the component is unmounted call the function returned from addListener. In this case it was called unsubscribe
unsubscribe();
Solution 3 - Reactjs
The current version of React Navigation provides the useFocusEffect hook. See here.
Solution 4 - Reactjs
React Navigation 5 provide a useFocusEffect hook, is analogous to useEffect, the only difference is that it only runs if the screen is currently focused. Check the documentation https://reactnavigation.org/docs/use-focus-effect
useFocusEffect(
useCallback(() => {
const unsubscribe = setRoleID(props.user.SELECTED_ROLE.id)
return () => unsubscribe()
}, [props.user])
)