Hydration

React combines <form action>, useActionState, and useOptimistic to handle pending feedback and optimistic updates while keeping form submission available before JavaScript runs. The article shows how this continuity can enhance the interface after hydration without giving up the browser’s native form behavior.

The key is to keep the server action directly in action: inserting a client function breaks submission without JavaScript. For optimistic updates, useHydrated() lets the form choose between the server action and its client-enhanced version.

Vinext 1.4 reduces work across several rendering stages: App Router layouts run once per request, prefetching dynamic routes no longer renders the entire page, and the chunks needed for hydration can compile in the background in recent Chrome. On the Hacker News benchmark, the author reports 31.1 ms of CPU per request, versus 54.4 ms in 1.3 and 33.7 ms for Next.js.

The release also keeps cached HTML and RSC payload generation in sync. Results still depend on the workload: on a content-site prototype, Next.js paints sooner and uses less CPU per request. A TanStack Redact test shows another trade-off: less JavaScript to download, but substantially more expensive hydration on content-heavy pages.

TanStack Redact 0.2.0 replaces React and React DOM in the browser without changing application code. Its stable integrations support TanStack Start, Vite, Vinext, and Next.js; with the latter two, React still handles server rendering while Redact takes over hydration and client rendering.

TanStack’s measurements show bundle reductions from 20.4% to 70.5% across its reference apps, but actual savings vary by project. The tradeoff is explicit: Redact renders synchronously, without React’s time slicing or interruptible rendering. A heavy render can therefore delay input, so compatibility and the busiest screens should be checked in each application.