useEffect not called in React Native when back to screen

Question

How are you. This is scenario of this issue. Let's say there are 2 screens to make it simple.

1. enter A screen. useEffect of A screen called.
2. navigate to B screen from A screen

3. 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

Answer 1

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])
  )