Как использовать хук реакции «useMemo» с асинхронными функциями?

Как я могу дождаться, чтобы разрешить/отклонить обещание, возвращаемое функцией, завернутой в хук реакции «useMemo»?

В настоящее время мой код выглядит так:

  // Get the persisted email/username
  const persistedUsername = useMemo(async () => {
    let username;

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

    return username;
  }, []);  

РЕДАКТИРОВАТЬ

Чего я пытаюсь добиться, так это получить данные до того, как компонент будет визуализирован, своего рода жизненный цикл «componentWillMount». У меня было два варианта:

1. Вычисление значения с использованием хука useMemo, чтобы избежать ненужных перерасчетов.
2. Комбинируйте useEffect + useState. Не лучшая идея, потому что useEffect запускается после отрисовки компонента.

@DennisVash предложил решение этой проблемы в комментариях:

Блокировка всех визуальных эффектов с помощью хука useLayoutEffect (какой-то компонентDidMount/componentDidUpdate), когда код запускается сразу после обновления DOM, но до того, как браузер успел «отрисовать» эти изменения.

Как видите, persistedUsername все еще обещание (я не жду результата асинхронной функции)...

Есть идеи? Не лучше ли выполнять асинхронные задания с помощью этого хука? Любой кастомный крючок?

Кроме того, каковы недостатки выполнения этой операции таким образом по сравнению с использованием useEffect и useState?

То же самое с useEffect и useState:

  useEffect(() => {
    // Get the persisted email/username
    (async () => {
      const persistedUsername = await AsyncStorage.getData(
        `@${ASYNC_STORAGE_KEY}:username`
      );

      emailOrUsernameInput.current.setText(persistedUsername);
    })();
  }, []);

Спасибо.