React 19: New Tools To Work With Forms

This article walks through the common struggles developers face when dealing with forms — and how React 19 finally introduces some long-awaited tools that make form handling cleaner, more declarative, and far less error-prone.

Over the past six years in frontend development — from building complex form systems to integrating AI tools at SDG — I’ve written, debugged, and refactored more form code than I’d like to admit.

And if you’ve ever built or maintained forms in React, you probably share that feeling. They’re deceptively simple… until they’re not.

In this article, I’ll walk you through the common struggles developers face when dealing with forms — and how React 19 finally introduces some long-awaited tools that make form handling cleaner, more declarative, and far less error-prone. ✨

---

Common challenges in form handling

🔍 Let’s start with the pain points that every React developer has faced at least once.

1. Boilerplate code everywhere

Managing form state in React usually starts like this:

const [name, setName] = useState(''); const [surname, setSurname] = useState(''); const [error, setError] = useState(null); function handleSubmit(event) { event.preventDefault(); }

✅ It’s simple — and perfectly fine for small forms.

But as soon as you scale up, you end up drowning in repetitive state hooks, manual resets, and endless event.preventDefault() calls.

Each keystroke triggers a re-render, and managing errors or pending states requires even more state variables. It’s functional, but far from elegant.

2. Props drilling

When your form isn’t just one component but a hierarchy of nested components, you end up passing props through every level:

<Form> <Field error={error} value={name} onChange={setName}> <Input /> </Field> </Form>

State, errors, loading flags — all drilled down through multiple layers. 📉 \n This not only bloats the code but makes maintenance and refactoring painful. 😓

3. Optimistic updates are hard

Ever tried to implement optimistic updates manually?

That’s when you show a “success” change in the UI immediately after a user action — before the server actually confirms it.

It sounds easy but managing rollback logic when a request fails can be a real headache. 🤕

Where do you store the temporary optimistic state? How do you merge and then roll it back? 🔄

React 19 introduces something much cleaner for this.

---

useActionState: a new way to handle form submissions

One of the most exciting additions in React 19 is the ==*useActionState *==hook.

It simplifies form logic by combining async form submission, state management, and loading indication — all in one place. 🎯

const [state, actionFunction, isPending] = useActionState(fn, initialState);

Here’s what’s happening:

• ==fn== — your async function that handles the form submission

• ==initialState== — the initial value of your form state

• ==isPending== — a built-in flag showing whether a submission is in progress

  \

How it works

The async function passed to ==useActionState== automatically receives two arguments:

const action = async (previousState, formData) => { const message = formData.get('message'); try { await sendMessage(message); return { success: true, error: null }; } catch (error) { return { success: false, error }; } };

You then hook it into your form like this:

const [state, actionFunction, isPending] = useActionState(action, { success: false, error: null, }); return <form action={actionFunction}> ... </form>;

\n Now, when the form is submitted, React automatically:

• Calls your async ==action==
• Updates **==*state *==**with the returned result
• Tracks the submission process via ==isPending==

No more manual ==useState, preventDefault,== or reset logic — React takes care of all of that. ⚙️

---

A note about startTransition

If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with ==startTransition==:

const handleSubmit = async (formData) => { await doSomething(); startTransition(() => { actionFunction(formData); }); };

Otherwise, React will warn you that an async update occurred outside a transition, and ==isPending== won’t update properly.

---

Why you’ll love useActionState

• ✅ No need for multiple ==*useState *==hooks
• ✅ Automatic pending state (==isPending==)
• ✅ No ==event.preventDefault==() required
• ✅ Auto form reset after successful submission

Form logic feels declarative again — just describe the action, not the wiring.

useFormStatus: no more props drilling

Another powerful new hook — ==useFormStatus== — solves the problem of prop drilling in form trees.

import { useFormStatus } from 'react-dom'; const { pending, data, method, action } = useFormStatus();

You can call this hook inside any child component of a form, and it will automatically connect to the parent form’s state.

---

Example

function SubmitButton() { const { pending, data } = useFormStatus(); const message = data ? data.get('message') : ''; return ( <button type="submit" disabled={pending}> {pending ? `Sending ${message}...` : 'Send'} </button> ); } function MessageForm() { return ( <form action={submitMessage}> <SubmitButton /> </form> ); }

:::info Notice that ==SubmitButton== can access the form’s data and pending status — without any props being passed down.

:::

---

Gotchas to remember

• ❌ It doesn’t work if you call it in the same component where the form is rendered. It must be inside a child component.
• ❌ It won’t react to forms using onSubmit handlers — it must be a form with an ***action ***prop.
• ⚠️ As of now, formMethod overrides inside buttons or inputs (e.g., formMethod=”get”) don’t work as expected — the form still uses the main method. \n 🐛 I’ve opened anissue on GitHub to track that bug.

---

Why useFormStatus matters

🧩 Eliminates prop drilling in form trees \n ⚡ Makes contextual decisions inside child components possible \n 💡 Keeps components decoupled and cleaner

---

useOptimistic: declarative optimistic UI

Finally, let’s talk about one of my favorite additions — ==useOptimistic==.

It brings built-in support for optimistic UI updates, making user interactions feel instant and smooth.

The problem

Imagine clicking “Add to favorites.” You want to show the update immediately — before the server response.

Traditionally, you’d juggle between local state, rollback logic, and async requests.

The solution

With ==useOptimistic==, it becomes declarative and minimal:

const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, (state, newMessage) => [newMessage, ...state] ); const formAction = async (formData) => { addOptimisticMessage(formData.get('message')); try { await sendMessage(formData); } catch { console.error('Failed to send message'); } };

If the server request fails, React automatically rolls back to the previous state.

If it succeeds — the optimistic change stays.

---

Important rule: don’t mutate

The update function you pass to useOptimistic must be pure:

❌ Wrong:

(prev, newTodo) => { prev.push(newTodo); return prev; }

✅ Correct:

(prev, newTodo) => [...prev, newTodo];

:::tip Always return a new state object or array!

:::

---

Using with startTransition

If you trigger optimistic updates outside of a form’s action, wrap them in startTransition:

startTransition(() => { addOptimisticMessage(formData.get('message')); sendMessage(formData); });

Otherwise, React will warn you that an optimistic update happened outside a transition. 💡

---

Benefits of useOptimistic

• ⚡ Instant UI feedback
• 🔄 Automatic rollback on errors
• 🧼 Cleaner component logic
• ⏳ Fewer loading states needed

It’s the kind of UX improvement users feel — even if they don’t know why your app suddenly feels so fast.

---

Conclusions

React 19 significantly simplifies form handling — and for once, it’s not about new syntax, but real developer experience improvements.

🚀 Here’s a quick recap of what to use and when:

| Goal | React 19 Tool | |----|----| | Access form submission result | ==useActionState== | | Track pending submission | ==isPending== from ==useActionState== or ==pending== from ==useFormStatus== | | Access form state deep in children | ==useFormStatus== | | Handle optimistic UI updates | ==useOptimistic== |

These hooks make forms in React declarative, composable, and far less noisy.

If you’ve ever felt that working with forms in React meant writing boilerplate just to keep things in sync — React 19 is the release you’ve been waiting for. ✨

---

Join a team that’s shaping the future of web experiences with React 19! 🚀 \n

At Social Discovery Group, we’re building smarter, faster, and more dynamic interfaces — and we’re hiring. Explore your next opportunity with us today.

---

:::info Written by Sergey Levkovich, Senior Frontend Developer at Social Discovery Group.

:::

\