not able to access the updated state of const inside the usefocusEffect

Question

I am new to react native ,I wanted to access the updated state of variable in useFocusEffect,Currently the const declared at start const [remember, setRemember] = useState() is not updated which I am using in useFocusEffect.Any idea about this?

  const rememberMe = ({ navigation }) => {
  const [remember, setRemember] = useState();

  useEffect(() => {
    getUserEmailAndPassword();
  }, []);

  const getUserEmailAndPassword = async () => {
    try {
      const loginSaved = await AsyncStorage.getItem("userLoginDetails");
      const currentUser = JSON.parse(loginSaved);
      if (currentUser?.state == true) {
        setRemember(true);
      } else {
        setRemember(false);
      }
    } catch (error) {}
  };

  useFocusEffect(
    useCallback(() => {
      return () => {
       // here remember is not updating 
        if (remember === true) {
          forgetUser();
        } else {
          try {
            const loginSaved = AsyncStorage.getItem("userLoginDetails");
            const currentUser = JSON.parse(loginSaved);
            if (
              currentUser?.userEmail !== null &&
              currentUser?.userPassword != null
            ) {
              rememberUser(
                currentUser?.userEmail,
                currentUser?.userPassword,
                (state = true)
              );
            }
          } catch (error) {}
        }
      };
    }, [])
  );

  const rememberUser = async (email, password, state) => {
    const userLoginDetails = {
      userEmail: email,
      userPassword: password,
      state: state,
    };
    try {
      await AsyncStorage.setItem(
        "userLoginDetails",
        JSON.stringify(userLoginDetails)
      );
    } catch (error) {
      // Error saving data
    }
  };

  const checkToRemember = (value) => {
    if (value == true) {
      setRemember(false);
    } else {
      setRemember(true);
    }
  };

  const forgetUser = async () => {
    try {
      await AsyncStorage.removeItem("userLoginDetails");
    } catch (error) {
      // Error removing
    }
  };

  return (
    <SafeAreaView
      style={styles.securityContainer}
      edges={["right", "top", "left"]}
    >
      <Toggle
        isOn={remember}
        onToggle={() => {
          setRemember(!remember);
          checkToRemember(remember);
        }}
      />
    </SafeAreaView>
  );
};

export default rememberMe;

when the focus is removed ,getting the remember value as undefined,its not updating.

Answer 1

set useState initial false as false;

const [remember, setRemember] = useState<boolean>(false);

useFocusEffect should be called after useEffect which is getUserEmailAndPassword has been called.

useFocusEffect(
    useCallback(() => {
      return () => {
       
    }, [remember])
  );

Work around on this and it should resolve your issue.