ARTICLE AD BOX
I need to capture some user input in the middle of an async function and then continue the function after the user responds.
Conceptually, something like this:
const getUsername = async () => { // 1. Do some async work const token = await Promise.resolve("fake-token-123"); // 2. Now I need to ask the user for a username via a React component // and wait for their input here const username = await ???; // show <UsernameDialog /> and wait for result return { username, token }; };What I would like:
From inside getUsername, trigger rendering of a React component (e.g. a modal or dialog) somewhere in the app.
Let the component handle the UI (form inputs, validation, cancel/confirm).
When the user submits, resolve a promise so that getUsername can await it and continue.
Some constraints:
This is a React application and the <UsernameDialog /> needs access to the global app context
The async function is not itself a component or hook; it can be called from various places (e.g. command handlers, services).
Questions
What is the recommended pattern in React to:
mount a component on demand and
treat the result as a promise that can be await‑ed from a plain async function?
Is there a clean way to implement this with portals/context or some kind of “dialog manager”?
Are there any anti‑patterns I should avoid (e.g. directly calling createRoot inside the async function)?
If code examples help, an example of a simple <UsernameDialog onSubmit={(value) => ...} /> that integrates into the async function would be ideal.
