Build a Signup Form with async username availability check

Q: Build a Signup Form with async username availability check

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes you have built a basic validated form; the [Form with validation](/interview-question/build-a-form-with-validation) question covers that ground. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and every output in section 6 was produced by actually running it on React 19.3.1, including a deliberately broken copy that shows the bug the solution prevents. ## 1. Why This Even Matters — A Story First Picture phoning a hotel to ask if a room is free. You say "Is room 12 free?" and, before they answer, you change your mind: "Actually, room 14?". The receptionist checks room 14 quickly and says "free". Then a colleague who went to check room 12 comes back and shouts "taken!". If you only liste

The problem

Question presented to candidate: "On our sign-up form, people pick a username and we tell them right away whether it is free. Build that check against a fake API. Do not send a request on every keystroke, and make sure a slow answer for something they typed earlier can never overwrite the answer for what is in the box now."

Requirements:

Username rules checked locally first: 3 to 16 characters, lowercase letters, digits and underscore. No request is sent for a name that fails them.
For a valid name, wait until typing pauses (debounce, 400 ms), then call a simulated checkUsername(name) with variable latency.
Show Checking availability..., <name> is available, <name> is taken, or a retry message if the request fails, in a polite live region.
Responses for anything other than the current value are ignored, even if they arrive last.
Sign up is enabled only when the name is confirmed available and the email is valid; then a simulated create call and a welcome message.

What a strong answer should cover:

Debounce with a timer that is cleared on every change, and why it reduces load and flicker.
The race condition: two requests in flight, the older one answers last. Fix it with a per-request staleness flag or request id (cleanup), and optionally by tagging each result with the name it answers.
Deriving the visible status from the current value and the latest result, instead of storing status strings.
Cancelling: clearTimeout for the pending timer, and AbortController or switchMap for in-flight requests; a Promise itself cannot be cancelled.
Accessibility (aria-live="polite" for the status, aria-describedby on the input) and why the server must still re-check at submit.

Clarifying questions expected:

"Is the check case-insensitive, and are usernames normalized before checking?"
"Should we cache answers for names already checked?"
"What happens if availability changes between the check and the submit?"

Code / implementation expected: Yes. A form with a debounced, race-safe availability check, demonstrated with a timeline where an older request resolves after a newer one.

Forms
Async
Debounce

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. Assumes you have built a basic validated form; the Form with validation question covers that ground. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and every output in section 6 was produced by actually running it on React 19.3.1, including a deliberately broken copy that shows the bug the solution prevents.

1. Why This Even Matters — A Story First

Picture phoning a hotel to ask if a room is free. You say "Is room 12 free?" and, before they answer, you change your mind: "Actually, room 14?". The receptionist checks room 14 quickly and says "free". Then

The solution is hidden so you can try first

13 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import SignupForm from "./src/components/SignupForm";
import "./styles.css";

export default function App() {
  return (
    <main className="page">
      <SignupForm />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.