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

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"

Answer 2

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();

Answer 3

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

Answer 4

The current version of React Navigation provides the useFocusEffect hook. See here.

Answer 5

The above mentioned solution would work definitely but in any case you need to know why it happens here is the reason,

In react native all the screens are stacked meaning they follow the LAST-IN-FIRST-OUT order, so when you are on a SCREEN A and go.Back(), the component(Screen A) would get un-mounted because it was the last screen that was added in the stack but when we naviagte to SCREEN B, it won't get un-mounted and the next SCREEN B would be added in the stack.

So now, when you go.Back() to SCREEN A, the useEffect will not run because it never got un-mounted. React-native keeps the navigation this way to make it look more responsive and real time.

if you want to un-mount the Screen everytime you navigate to some other screen you might want to try navigation.replace than navigation.navigate

Hope this helps you.

Answer 6

import { useIsFocused } from "@react-navigation/native"; 
 
const focus = useIsFocused();  // useIsFocused as shown          
 
useEffect(() => {   // whenever you are in the current screen, it will be true vice versa
    if(focus == true){ // if condition required here because it will call the function even when you are not focused in the screen as well, because we passed it as a dependencies to useEffect hook
       handleGetProfile();
    }
}, [focus]);

more

Answer 7

Solution with useEffect

import { useNavigation } from '@react-navigation/native';

const Component = (props) => {
  const navigation = useNavigation()
  const isFocused = useMemo(() => navigation.isFocused(), [])
  useEffect(() => {
    if (isFocused) {
      // place your logic
    }
  }, [isFocused])
}

Answer 8

I was struggling with the same issue but because the data I was updating on screen B and displaying on screen A was also being used on other screens it made perfect sense to put this set of data in a redux store slice.

Besides in my case screen A was placed in a tab navigator and had a few sibling screens in other tabs the user could swipe left/right to. This made useFocusEffect problematic since it was firing on each swipe and for other reasons I wanted to avoid that.

Anyway, with redux I could get away with useEffect not firing on going back. Just a hint alongside other solutions suggested here.