Handling Form State in React 19

If you’ve been keeping up with Next.js and React 19, you’ve probably seen the new hooks. They aren't just minor updates; they fundamentally change how we handle data fetching and UI feedback. Let's look at how they work in the real world.

Why we needed this

Until recently, even a simple form required a mountain of state. You’d manually track loading, error, and data every single time.

// The old "Boilerplate" way
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
 
const handleSubmit = async (e) => {
  e.preventDefault();
  setLoading(true);
  try {
    await submitForm(formData);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

It works, but it’s repetitive and fragile. React 19 moves this logic into the engine itself.

1. useActionState: The Form Manager

This is the replacement for manual loading/error states. It’s built to work directly with Server Actions.

const [state, formAction, isPending] = useActionState(createUser, null);

Why it actually matters:

• No more useEffect for errors: The state object comes back directly from your server action.
• Progressive Enhancement: This works even if the user's JavaScript hasn't loaded yet.
• Native Loading: isPending is handled by React, so no more setLoading(true) calls.

// Example usage
<form action={formAction}>
  <input name="email" disabled={isPending} />
  {state?.error && <p className="error">{state.error}</p>}
  <button disabled={isPending}>{isPending ? "Adding..." : "Add User"}</button>
</form>

2. useTransition: Background Work

useTransition is about responsiveness. It tells React: "Do this work, but don't freeze the screen while you do it."

I find it most useful for actions that don't involve a traditional form, like toggling a checkbox or a "Like" button.

const [isPending, startTransition] = useTransition();
 
const handleToggle = () => {
  startTransition(async () => {
    await toggleTodo(id);
  });
};
 
return (
  <div className={isPending ? "opacity-50" : ""}>
    <input type="checkbox" onChange={handleToggle} />
  </div>
);

3. useOptimistic: Fake it 'til you make it

This is the secret to making web apps feel like mobile apps. It lets you show the "success" state before the server even responds.

If you’ve used Instagram or Twitter, you know that when you hit "Like," the heart turns red instantly. They don't wait for a database confirmation. That’s what useOptimistic does for us.

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  currentLikes,
  (state, newLike) => [...state, newLike],
);
 
const handleLike = () => {
  startTransition(async () => {
    addOptimisticLike(newLike); // UI updates instantly
    await saveLikeToDB(id); // Server catches up (reverts automatically if it fails)
  });
};

My Dos and Don'ts

After using these in production, a few things stood out:

✅ Do:

• Combine them. Use useActionState for the form logic and useOptimistic to show the new item in the list immediately.
• Use Uncontrolled Inputs. Server Actions work best when you let the browser handle the FormData. Stop syncing every keystroke to a useState if you don't have to.
• Disable buttons. Always use isPending to prevent users from double-clicking and sending three requests.

❌ Don't:

• Don't use Optimistic for everything. If you’re handling a bank transfer or a sensitive deletion, wait for the server. You don't want to show a "Success" message and then have it vanish because the request failed.
• Don't forget straight quotes. Keep your code clean; use "straight quotes" instead of curly ones.
• Don't over-capitalize. Keep your headers sentence-case. It’s easier to read.

Summary

React 19 isn't about new features as much as it's about removing friction. By moving the "loading/error/optimistic" dance into these hooks, we can finally stop writing the same 50 lines of boilerplate for every form.

Give them a shot on your next project—once you get used to the formAction pattern, it’s hard to go back.