how to await the code in the setTimeout function till I get the response from an another async function

Question

I am making a splash screen in react native and my code in the setTimeout function runs before I get the response from the getUser function.

Also when I logged userrrrrrrr I get a object with unknown value like this - {"_U": 0, "_V": 0, "_W": null, "_X": null} userrrrrrrr

What I want is that the code in the setTimeout function to run only when I get proper response from the getUser Function.

//

  const getUser = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('currentUser');
      if (jsonValue) {
        console.log(jsonValue, 'jjjjjj');
        return jsonValue;
      } else {
        console.log('else');
        return false;
      }
    } catch (e) {
      console.log('catch');
      return false;
    }
  };

  useEffect(() => {
    setTimeout(() => {
      if (getUser()) {
        console.log(getUser(), 'userrrrrrrr');
        navigation.replace('Drawer');
      } else {
        console.log(getUser(), 'userrrrrrrr111111');
        navigation.replace('Login');
      }
    }, 5000);
  }, []);

//

Answer 1

    useEffect(async () => {
    const user = await getUser() 
    setTimeout(() => {
      if (user) {
        console.log(getUser(), 'userrrrrrrr');
        navigation.replace('Drawer');
      } else {
        console.log(getUser(), 'userrrrrrrr111111');
        navigation.replace('Login');
      }
    }, 5000);
  }, []);

Answer 2

  const getUser = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('currentUser');
      if (jsonValue) {
        console.log(jsonValue, 'jjjjjj');
        return jsonValue;
      } else {
        console.log('else');
        return false;
      }
    } catch (e) {
      console.log('catch');
      return false;
    }
  };

  useEffect(aync () => {
    setTimeout(() => {
      const result = await getUser()
      if (result) {
        navigation.replace('Drawer');
      } else {
        navigation.replace('Login');
      }
    }, 5000);
  }, []);

Answer 3

One way would be to save the getUser response in a state variable and let useEffect run when that state changes. In your setTimeout , check if your user state holds a valid value (non-null) before executing your logic.

const [user, setUser] = useState(null) // Default value of null

const getUser = async () => {
  ...
  // When you get a successful response, update the state
  setUser(response)
  ...
}

useEffect(() => {
  getUser()
}, []) // No dependencies so will run only when the component mounts

useEffect(() => {
  setTimeout(() => {
    if (user != null) { // Check user validity here!
      console.log({ user });
      navigation.replace('Drawer');
    } else {
      console.log({ user }); // Should be null
      navigation.replace('Login');
    }
  }, 5000);
}, [user]) // Runs whenever local user state updates

You may not need setTimeout at all with the above approach, you can just navigate when you have user data in the state -

const [loading, setLoading] = useState(true)

const getUser = async () => {
  setLoading(true)
  ...
  // When you get a successful response, update the state
  setUser(response)
  setLoading(false)
  ...
}

useEffect(() => {
  if (!loading) {
    if (user != null) { // Check user validity here!
      console.log({ user });
      navigation.replace('Drawer');
    } else {
      console.log({ user }); // Should be null
      navigation.replace('Login');
    }
  }
}, [user])