{"id":328,"date":"2026-06-15T13:05:09","date_gmt":"2026-06-15T13:05:09","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/react-19-changed-how-i-write-forms\/"},"modified":"2026-06-15T13:05:09","modified_gmt":"2026-06-15T13:05:09","slug":"react-19-changed-how-i-write-forms","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/react-19-changed-how-i-write-forms\/","title":{"rendered":"React 19 Changed How I Write Forms (For the Better)"},"content":{"rendered":"

I had a <form><\/code> in a side project that I rewrote four times last year, and every version was a little worse than the one before it. Loading flag here, error state there, a useEffect<\/code> to reset the input after a successful submit, a ref so I could focus the field again. None of it was hard. All of it was annoying. By the fourth pass I had a 60-line component that did roughly what a plain HTML form did in 1998, except mine could also get stuck in a spinner if the network hiccuped.<\/p>\n

Then I moved the project to React 19 and deleted about half of it. This isn’t a “everything changed” post, because most of my React looks the same. But forms, optimistic updates, and reading async data got genuinely simpler, and I want to show you the before-and-after on the parts I actually use.<\/p>\n

The thing I kept getting wrong in React 18<\/h2>\n

Here’s the shape of the problem. In React 18, a submit handler that talks to the network needs you to track three things by hand: whether it’s pending, whether it failed, and what to do after it succeeds. Miss one and the UI lies to the user.<\/p>\n

\/\/ React 18\nfunction CommentForm({ postId }) {\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState(null);\n  const inputRef = useRef(null);\n\n  async function handleSubmit(e) {\n    e.preventDefault();\n    setPending(true);\n    setError(null);\n    try {\n      await postComment(postId, inputRef.current.value);\n      inputRef.current.value = "";\n    } catch (err) {\n      setError(err.message);\n    } finally {\n      setPending(false);\n    }\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input ref={inputRef} name="comment" disabled={pending} \/>\n      <button disabled={pending}>{pending ? "Posting..." : "Post"}<\/button>\n      {error && <p className="err">{error}<\/p>}\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
It works. I shipped versions of this for years. But the bookkeeping is all mine, and the bugs live in the gaps: forgetting to clear the error on retry, leaving the button disabled after an exception you didn’t expect, racing two submits because nothing stops the second one.<\/p>\n
useActionState: the form state I stopped wiring by hand<\/h2>\n
React 19 ships an actions<\/code> model and a hook called useActionState<\/code> that owns the pending and result state for you. You give it an async function; it gives you back the latest state, a wrapped action, and a pending boolean.<\/p>\n
\/\/ React 19\nimport { useActionState } from "react";\n\nfunction CommentForm({ postId }) {\n  const [error, submitAction, pending] = useActionState(\n    async (_prev, formData) => {\n      try {\n        await postComment(postId, formData.get("comment"));\n        return null; \/\/ no error\n      } catch (err) {\n        return err.message;\n      }\n    },\n    null\n  );\n\n  return (\n    <form action={submitAction}>\n      <input name="comment" disabled={pending} \/>\n      <button disabled={pending}>{pending ? "Posting..." : "Post"}<\/button>\n      {error && <p className="err">{error}<\/p>}\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
No useState<\/code> for pending. No useRef<\/code>. The <form action={...}><\/code> prop is the part that surprised people: forms can now take a function directly, and React resets uncontrolled fields on a successful action so I stopped manually clearing the input. The official React 19 release notes<\/a> walk through the whole actions model, and the useActionState<\/code> reference<\/a> is worth a read because the argument order trips people up the first time.<\/p>\n
The win isn’t fewer lines, although it is fewer lines. The win is that pending state and the form are wired together by the framework, so the two can’t drift apart. I covered a related cleanup in my post on why I stopped writing forwardRef<\/a>, and it’s the same theme: React 19 quietly absorbed a chunk of plumbing I used to own.<\/p>\n
useOptimistic, or how I stopped faking responsiveness badly<\/h2>\n
The other thing I always hand-rolled was optimistic UI. Show the comment immediately, then reconcile when the server answers. My old approach kept a shadow copy of the list in state and a mess of logic to roll it back on failure. It worked until it didn’t, usually when two actions overlapped.<\/p>\n
useOptimistic<\/code> gives you a temporary state that automatically reverts when the surrounding action finishes or throws.<\/p>\n
\/\/ React 19\nimport { useOptimistic } from "react";\n\nfunction Comments({ comments, postId }) {\n  const [optimistic, addOptimistic] = useOptimistic(\n    comments,\n    (state, newText) => [...state, { id: "temp", text: newText, sending: true }]\n  );\n\n  async function action(formData) {\n    const text = formData.get("comment");\n    addOptimistic(text);\n    await postComment(postId, text);\n  }\n\n  return (\n    <>\n      <ul>{optimistic.map(c => (\n        <li key={c.id} style={{ opacity: c.sending ? 0.5 : 1 }}>{c.text}<\/li>\n      ))}<\/ul>\n      <form action={action}><input name="comment" \/><button>Post<\/button><\/form>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
When the action resolves, the optimistic entry drops and the real list (refreshed however you refresh it) takes over. When it throws, React rolls the optimistic state back for you. I wrote a longer field report on this in six months with useOptimistic<\/a>, including the cases where it bit me, so I won’t repeat all of it here.<\/p>\n
The use<\/code> hook and reading promises without useEffect<\/h2>\n
use<\/code> is the one I’m still careful with. It lets a component read a promise (or context) during render, and it suspends until the promise resolves. Paired with a Suspense boundary, it replaces a lot of the useEffect<\/code> plus loading-flag dance for data you pass down.<\/p>\n
\/\/ React 19\nimport { use, Suspense } from "react";\n\nfunction Profile({ userPromise }) {\n  const user = use(userPromise); \/\/ suspends until resolved\n  return <h1>{user.name}<\/h1>;\n}\n\nfunction Page({ userPromise }) {\n  return (\n    <Suspense fallback={<p>Loading...<\/p>}>\n      <Profile userPromise={userPromise} \/>\n    <\/Suspense>\n  );\n}\n<\/code><\/pre>\n
The catch: you don’t want to create that promise inside the component on every render, or you’ll fetch in a loop. You create it higher up, or in a server component, and hand it down. The use<\/code> reference<\/a> is blunt about the rules, and I’d read it twice before reaching for this in anything load-bearing. I got it wrong for about a week before the loop made sense to me.<\/p>\n
One more thing that use<\/code> does, which is easy to miss: it can read context, and unlike useContext<\/code>, you’re allowed to call it conditionally. That sounds like a footnote until you have a component that only needs theme context on one branch and you’ve been pulling it unconditionally at the top for years out of habit. Small thing. It adds up.<\/p>\n
useFormStatus: the prop drilling I stopped doing<\/h2>\n
There’s a quieter hook that pairs with all of this: useFormStatus<\/code>. It lets a child component read the pending state of the form it sits inside, without you threading a pending<\/code> prop down through every layer. The classic case is a submit button that lives three components deep in some design-system wrapper.<\/p>\n
\/\/ React 19\nimport { useFormStatus } from "react-dom";\n\nfunction SubmitButton() {\n  const { pending } = useFormStatus();\n  return <button disabled={pending}>{pending ? "Saving..." : "Save"}<\/button>;\n}\n<\/code><\/pre>\n
SubmitButton<\/code> doesn’t take any props about loading state. It reads it from the nearest parent <form><\/code>. The first time I deleted a pending<\/code> prop that had been passed through four components, I actually said “oh, thank god” out loud. It’s a small ergonomic win, but prop drilling boolean state is the kind of thing that quietly makes a codebase feel heavier than it is.<\/p>\n
The catch worth knowing: useFormStatus<\/code> only reads the form it’s a descendant of, and the button has to be inside that <form><\/code>, not rendering it. If you put the hook in the same component that renders the form, you get nothing back, because it’s looking at a parent that isn’t there. I tripped on that exactly once.<\/p>\n
What I’d actually adopt first<\/h2>\n
If you’re upgrading an existing app, don’t rewrite everything. Start with useActionState<\/code> on your noisiest forms, the ones with the most hand-managed pending and error state. That’s where the cleanup pays for itself immediately and the risk is low, because the behavior is the same and you’re deleting code rather than adding it.<\/p>\n
Add useOptimistic<\/code> only where you already fake responsiveness, and skip it where a plain spinner is honest enough. Leave use<\/code> and Suspense-driven data fetching for new code or a deliberate refactor, because the promise-creation rule is easy to trip over.<\/p>\n
One caveat I’d flag before you go all-in: these patterns assume you’re comfortable with the actions model, and if your app leans heavily on a data library like TanStack Query or Redux Toolkit Query, there’s some overlap to think through. The hooks don’t replace those tools, and bolting both onto the same flow can muddy who owns the loading state. I’d pick one source of truth per interaction rather than letting React’s form actions and your query library both try to manage pending state. When they fight, you get flicker, and flicker is worse than a slightly more verbose component.<\/p>\n
A concrete thing to do this week: open the form in your app that has the most useState<\/code> calls around submitting, and try porting just that one to useActionState<\/code>. You’ll know within an hour whether the trade feels right. If you want to see how I think about adopting framework features without betting the whole codebase on them, that’s most of what I write about over on my work page<\/a>. React 19 didn’t reinvent how I build. It just took back some chores I was tired of doing by hand.<\/p>\n","protected":false},"excerpt":{"rendered":"
React 19 forms, useActionState, and useOptimistic with before-and-after code. The features I actually kept after upgrading, and the one I’m still careful with.<\/p>\n","protected":false},"author":2,"featured_media":327,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"React 19 forms, useActionState, and useOptimistic with before-and-after code. The features I actually kept after upgrading, and the one I'm still careful with.","rank_math_focus_keyword":"react 19","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[354,35],"tags":[38,44,41,359,172],"class_list":["post-328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-web-development","tag-frontend","tag-javascript","tag-react","tag-react-19-2","tag-web-development-2"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=328"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/328\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/327"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}