Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – UseEffect return statement call twice when update the state value

When I click NewTab button, newtab state will change and I want to call useEffect when newTab state change, so it will goBack(), and will call return statement as well, but somehow return statement executing twice, with both old value and new value (false , true respectively).

Here is my problem statement.

const App = () => {
    const [newTab, setNewTab] = useState(false);

    useEffect(() => {
       if (newTab) {
         navigation.goBack();
       }

        return () => { // call twice first get false, and second time get true
            if (newTab == false) {
                //clear the redux data
            }
        }
    }, [newTab]);

    return (
        <View>
            <TouchableOpacity
               onPress={() => {
                  navigation.goBack();
               }}>
            GoBack
        </TouchableOpacity>

            <TouchableOpacity
                onPress={() => {
                    setNewTab(true);
                    //Code for the push data in Redux store
                }}>
                NewTab
            </TouchableOpacity>
        </View>
    )
}

export default App();
Tags:

2

Answers


  1. 0

    No need to use useEffect in this case, you component will automatically render after state will change.
    like this

    const App = () => {
const [newTab, setNewTab] = useState(false);

   if (newTab) {
     navigation.goBack();
   }
  else{
  //clear the redux data
   }



return (
    <View>
        <TouchableOpacity
           onPress={() => {
              navigation.goBack();
           }}>
        GoBack
    </TouchableOpacity>

        <TouchableOpacity
            onPress={() => {
                setNewTab(true);
                //Code for the push data in Redux store
            }}>
            NewTab
        </TouchableOpacity>
    </View>
)

    }

    Login or Signup to reply.
  2. 0

    In your case, the useEffect is triggered when newTab changes, and the cleanup function is executed with the old value of newTab before the new value.
    you can use a variable to store the previous value and compare it within the cleanup function.

    const App = () => {
    const [newTab, setNewTab] = useState(false);

    useEffect(() => {
        let isMounted = true;

        if (newTab) {
            navigation.goBack();
        }

        return () => {
            if (isMounted && newTab === false) {
                // Clear the redux data
            }
            isMounted = false;
        };
    }, [newTab]);

    return (
        <View>
            <TouchableOpacity
                onPress={() => {
                    navigation.goBack();
                }}>
                GoBack
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => {
                    setNewTab(true);
                    // Code for pushing data into the Redux store
                }}>
                NewTab
            </TouchableOpacity>
        </View>
    );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search