When will you use this?

Add routing when your app has more than one screen and URLs should be bookmarkable.

• Multi-page apps like dashboards use React Router — /settings, /profile, /orders.
• E-commerce sites route /product/123 to a product detail component.

Real-world: Naukri signup with loading state

Job seeker signup disables button and shows spinner while /api/register runs — prevents double submit and duplicate accounts.

Production-style code

function SignupForm() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setPending(true);
    setError(null);
    const data = new FormData(e.target);
    try {
      const res = await fetch('/api/register', { method: 'POST', body: data });
      if (!res.ok) throw new Error('Signup failed');
      window.location.href = '/dashboard';
    } catch (err) {
      setError(err.message);
    } finally {
      setPending(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p role="alert">{error}</p>}
      <button disabled={pending}>{pending ? 'Creating account…' : 'Sign up'}</button>
    </form>
  );
}

What happens in production: Professional forms always communicate in-flight state — users do not hammer submit during slow mobile networks.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

async function onSubmit(data) {
  setLoading(true);
  setError('');
  try {
    const res = await fetch('/api/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
    if (!res.ok) throw new Error('Signup failed');
    navigate('/welcome');
  } catch (e) {
    setError(e.message);
  } finally {
    setLoading(false);
  }
}

Line-by-line walkthrough

How it works (big picture)

• setLoading disables the button.
• try/catch shows errors.
• finally always clears loading even if request fails.

Do this on your computer

1. Add loading and error state.
2. Make submit handler async.
3. Disable button when loading is true.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Async Forms and inspect component props/state.

Remember

Async submit = loading + try/catch + user feedback. Prevent double submit while waiting. Show server error messages clearly.

Common questions