\n
\n React 19 shipped a laundry list of features. Twitter threads treated every hook like mandatory. In production on client sites and this portfolio, I adopted a subset \u2014 the ones that remove real bugs or UX jank \u2014 and ignored the rest until the ecosystem caught up. This is my honest react 19 features guide: what changed, code you can paste, and what I am still waiting on.
\nWhat actually changed at a high level
\nReact 19 stabilised the Actions model (forms and mutations with pending state), added useOptimistic for instant UI feedback, introduced the use() hook for reading promises and context, improved hydration error messages, and made ref-as-prop cleaner. The compiler (React Forget) is separate \u2014 exciting, not required to upgrade.
\nUpgrade path: Next.js 15 projects already pin compatible React versions. Read RSC vs client components before mixing Actions with Server Components \u2014 boundaries still matter.
\nReact 19 hooks and APIs \u2014 quick reference table<\/p>\n
API
\nPurpose
\nClient \/ Server
\nI use in prod?<\/p>\n
useOptimistic
\nOptimistic UI while mutation runs
\nClient
\nYes<\/p>\n
use()
\nRead promise or context
\nBoth (with Suspense)
\nYes (with RSC)<\/p>\n
useActionState
\nForm action state
\nClient
\nYes<\/p>\n
useFormStatus
\nPending from parent form
\nClient
\nYes<\/p>\n
ref as prop
\nNo forwardRef boilerplate
\nBoth
\nGradual<\/p>\n
Document metadata
\ntitle, meta in components
\nClient (limited)
\nPrefer Next.js metadata<\/p>\n
useOptimistic \u2014 instant feedback without lying to the user forever
\nCart quantity updates, like buttons, todo toggles \u2014 users expect instant UI. useOptimistic shows the next state while the server catches up, then reconciles on success or rolls back on error.
\n“use client”;import { useOptimistic, useTransition } from “react”;import { updateQuantity } from “.\/actions”;<\/p>\n
type Item = { id: string; qty: number };<\/p>\n
export function CartLine({ item }: { item: Item }) {const (optimisticQty, setOptimisticQty) = useOptimistic(item.qty);const (isPending, startTransition) = useTransition();<\/p>\n
function changeQty(next: number) {startTransition(async () => {setOptimisticQty(next);await updateQuantity(item.id, next);});}<\/p>\n
return ( changeQty(optimisticQty + 1)} disabled={isPending}>+{optimisticQty});}
\n\/\/ BEFORE \u2014 manual optimistic state with footgunsconst (qty, setQty) = useState(item.qty);const (pending, setPending) = useState(false);<\/p>\n
async function bump() {const prev = qty;setQty(qty + 1); \/\/ optimisticsetPending(true);try {await updateQuantity(item.id, qty + 1);} catch {setQty(prev); \/\/ easy to forget rollback paths} finally {setPending(false);}}<\/p>\n
\/\/ AFTER \u2014 useOptimistic + transition: rollback wired correctly
\nuse() \u2014 promises and context without useEffect hacks
\n\/\/ Server Component passes a promise to client childimport { use } from “react”;<\/p>\n
type Product = { id: string; name: string };<\/p>\n
function ProductList({ productsPromise }: { productsPromise: Promise }) {const products = use(productsPromise); \/\/ suspends until resolvedreturn ({products.map((p) => ({p.name}))});}<\/p>\n
\/\/ Parent (Server Component) creates the promise onceexport default function Page() {const productsPromise = getProducts(); \/\/ do not await herereturn (Loading products\u2026}>);}
\nIn production I use use() with Server Components streaming data \u2014 same mental model as async server fetch, less client useEffect spaghetti.
\nActions and forms \u2014 less boilerplate than manual fetch
\n“use client”;import { useActionState } from “react”;import { subscribe } from “.\/actions”;<\/p>\n
export function NewsletterForm() {const (state, formAction, pending) = useActionState(subscribe, { ok: false, message: “” });<\/p>\n
return ();}
\nPair with Next.js Server Actions for mutations without a separate API route file \u2014 still validate on the server, still treat client state as untrusted.
\nWhat I immediately adopted
\nuseOptimistic on any user-facing mutation where latency is felt on Indian mobile networks. useActionState \/ useFormStatus on marketing forms \u2014 fewer lines than custom pending flags. use() with Suspense boundaries on catalog sections fed from server promises. Better hydration errors \u2014 saved me an hour debugging a client-only chart imported into a Server Component (fixed by splitting the leaf).
\n\/\/ ref as prop \u2014 dropped forwardRef on new componentstype ButtonProps = React.ComponentProps & { ref?: React.Ref };<\/p>\n
export function Button({ ref, …props }: ButtonProps) {return ;}
\nWhat I’m waiting on
\nReact Compiler (Forget) \u2014 I will enable it per-route after stable Next.js integration docs, not on day one of React 19. Document metadata in client trees \u2014 I still use Next.js generateMetadata for SEO. Full ecosystem typings \u2014 some third-party libs lagged React 19 types for weeks; I pinned versions until they caught up.
\nI am also not rewriting every forwardRef component overnight \u2014 new code uses ref-as-prop; old code migrates on touch.
\nWaiting is a strategy, not laziness. The compiler will change how much manual memo we write \u2014 see my useCallback vs useMemo guide for why I am not adding more memo hooks while the ecosystem catches up.
\nMy production setup
\nIn production: React 19 + Next.js 15, Server Components by default, React 19 Actions on forms that need pending UX, optimistic updates on commerce interactions. Performance work still lives in caching and bundle size \u2014 see Next.js performance case study.
\nWhen experimenting, I use the workflow in Cursor + Claude for React \u2014 AI suggests React 19 APIs quickly, but I verify against official release notes before merge.
\nThe single takeaway
\nReact 19 is not a rewrite mandate. Adopt optimistic UI, Actions, and use() where they solve problems you already have. Wait on compiler and metadata experiments until your stack documents them.
\nRelated: Next.js vs React learning path. Contact.
\nIf this helped you
\nI publish free tutorials and write-ups like this in my spare time \u2014 no paywall on the guides. If it saved you an afternoon of trial and error, you can support the work:<\/p>\n
Related reading
\nMore guides on safdarali.in \u2014 same author, production-focused.<\/p>\n