When will you use this?

Use these patterns when data is shared across pages or comes from a server.

• Shopping carts, user sessions, and API data need clear state patterns.
• Teams pick Context, Zustand, or Redux based on app size — you will see all three in jobs.

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