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. 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. ✨ React 19 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();
} 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. event.preventDefault() event.preventDefault() 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> <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form> State, errors, loading flags — all drilled down through multiple layers. 📉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); 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 fn — your async function that handles the form submission fn — your async function that handles the form submission fn fn initialState — the initial value of your form state initialState — the initial value of your form state initialState initialState isPending — a built-in flag showing whether a submission is in progress isPending — a built-in flag showing whether a submission is in progress isPending isPending How it works The async function passed to useActionState automatically receives two arguments: useActionState useActionState 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 };
  }
}; 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: You then hook it into your form like this: const [state, actionFunction, isPending] = useActionState(action, {
  success: false,
  error: null,
});

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

return <form action={actionFunction}> ... </form>; Now, when the form is submitted, React automatically: Calls your async action
Updates ***state ***with the returned result
Tracks the submission process via isPending Calls your async action action action action Updates ***state ***with the returned result *state * Tracks the submission process via isPending isPending isPending isPending No more manual useState, preventDefault, or reset logic — React takes care of all of that. ⚙️ useState, preventDefault, useState, preventDefault, useState, preventDefault, A note about startTransition 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: If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with startTransition: startTransition const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
}; 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. isPending 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 ✅ No need for multiple ==*useState *==hooks ✅ Automatic pending state (isPending) isPending isPending isPending ✅ No event.preventDefault() required event.preventDefault event.preventDefault () ✅ Auto form reset after successful submission Form logic feels declarative again — just describe the action, not the wiring. useFormStatus: no more props drilling useFormStatus: no more props drilling Another powerful new hook — useFormStatus — solves the problem of prop drilling in form trees. useFormStatus import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus(); 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. inside any child component of a form Example 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>
  );
} 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>
  );
} Notice that SubmitButton can access the form’s data and pending status — without any props being passed down. Notice that SubmitButton can access the form’s data and pending status — without any props being passed down. SubmitButton SubmitButton Gotchas to remember 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.🐛 I’ve opened an__issue on GitHub__ to track that bug. ❌ It doesn’t work if you call it in the same component where the form is rendered. It must be inside a child component. in the same component child component ❌ It won’t react to forms using onSubmit handlers — it must be a form with an ***action ***prop. onSubmit onSubmit ⚠️ 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.🐛 I’ve opened an__issue on GitHub__ to track that bug. formMethod formMethod formMethod=”get” formMethod=”get” issue on GitHub Why useFormStatus matters 🧩 Eliminates prop drilling in form trees⚡ Makes contextual decisions inside child components possible💡 Keeps components decoupled and cleaner useOptimistic: declarative optimistic UI Finally, let’s talk about one of my favorite additions — useOptimistic. useOptimistic 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: useOptimistic useOptimistic useOptimistic 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');
  }
}; 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: pure ❌ Wrong: (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
} (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
} ✅ Correct: (prev, newTodo) => [...prev, newTodo]; (prev, newTodo) => [...prev, newTodo]; Always return a new state object or array! Always return a new state object or array! new Using with startTransition If you trigger optimistic updates outside of a form’s action, wrap them in startTransition: action action startTransition startTransition startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
}); 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 ⚡ 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 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 Goal

React 19 Tool Goal Goal Goal React 19 Tool React 19 Tool React 19 Tool Access form submission result

useActionState Access form submission result Access form submission result Access form submission result useActionState useActionState useActionState useActionState Track pending submission

isPending from useActionState or pending from useFormStatus Track pending submission Track pending submission Track pending submission isPending from useActionState or pending from useFormStatus isPending from useActionState or pending from useFormStatus isPending from useActionState or pending from useFormStatus isPending useActionState pending useFormStatus Access form state deep in children

useFormStatus Access form state deep in children Access form state deep in children Access form state deep in children useFormStatus useFormStatus useFormStatus useFormStatus Handle optimistic UI updates

useOptimistic Handle optimistic UI updates Handle optimistic UI updates Handle optimistic UI updates useOptimistic useOptimistic useOptimistic 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! 🚀 At Social Discovery Group, we’re building smarter, faster, and more dynamic interfaces — and we’re hiring. Explore your next opportunity with us today. Social Discovery Group Written by Sergey Levkovich, Senior Frontend Developer at Social Discovery Group. Written by Sergey Levkovich, Senior Frontend Developer at Social Discovery Group. Written by Sergey Levkovich, Senior Frontend Developer at Social Discovery Group. Written by Sergey Levkovich, Senior Frontend Developer at Social Discovery Group. Sergey Levkovich Sergey Levkovich Social Discovery Group Social Discovery Group

This story contains new, firsthand information uncovered by the writer.

Discovery

React 19: New Tools To Work With Forms

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

AI in Customer Success: How to Balance Automation and Personalisation

The Ten Top Cities for Highest Cloud Engineering Salaries

10 Popular Websites Built With Django

10 Best VS Code Extensions to Improve Your Productivity

11 Reasons Software Engineering Will Never Die

AI in Customer Success: How to Balance Automation and Personalisation

The Ten Top Cities for Highest Cloud Engineering Salaries

10 Popular Websites Built With Django

10 Best VS Code Extensions to Improve Your Productivity

11 Reasons Software Engineering Will Never Die

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps