How can I await, to resolve/reject, the promise returned by a function wrapped in the react hook "useMemo"?

Currently, my code looks like this:

  // Get the persisted email/username

  const persistedUsername = useMemo(async () => {

    let username;



    try {

      username = await AsyncStorage.getData(`@${ASYNC_STORAGE_KEY}:username`);

    } catch {}



    return username;

  }, []);  

EDIT

What I am trying to achieve is to get the data before the component is rendered, some kind of "componentWillMount" life-cycle. My two options were:

1. Computing the value using useMemo hook to avoid unnecessary recomputations.


2. Combine useEffect + useState. Not the best idea because useEffect runs after the component paints.

@DennisVash has proposed the solution to this problem in the comments:

Blocking all the visual effects using the useLayoutEffect hook (some kind of componentDidMount/componentDidUpdate) where the code runs immediately after the DOM has been updated, but before the browser has had a chance to "paint" those changes.

As you can see, persistedUsername is still a promise (I am not waiting the result of the asynchronous function)...

Any ideas? Is it not a good idea to perform asynchronous jobs with this hook? Any custom hook?

Also, what are the disadvantages of performing this operation in this way compared to using useEffect and useState?

Same thing with useEffect and useState:

  useEffect(() => {

    // Get the persisted email/username

    (async () => {

      const persistedUsername = await AsyncStorage.getData(

        `@${ASYNC_STORAGE_KEY}:username`

      );



      emailOrUsernameInput.current.setText(persistedUsername);

    })();

  }, []);

Thank you.