返回屏幕时在 React Native 中不调用 useEffect

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 ) Ie subscribe to the didFocus event and run whatever code you want whenever the component is focussed Eg

const unsubscribe = props.navigation.addListener('didFocus', () => {
    console.log('focussed');
});

Don't forget to unsubscribe when appropriate eg

// sometime later perhaps when the component is unmounted call the function returned from addListener. In this case it was called unsubscribe
unsubscribe();

Answer 3

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

Answer 4

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 5

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 6

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

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 7

import { useIsFocused } from "@react-navigation/native"; 
 
const focus = useIsFocused();  // use if focus as shown          
 
useEffect(() => {  // whenever you are in the current screen, it will be true vice versa
   handleGetProfile();
}, [focus]);

more