React 19 Hooks: What's New and How to Use Them Effectively

React 19 introduced four new built-in hooks that change how developers handle asynchronous data, form interactions, and optimistic UI updates. These hooks — use() , useActionState , useFormStatus , and useOptimistic — reduce boilerplate, eliminate common patterns that previously required third-party code, and align React more closely with modern server-first architectures. The New React 19 Hooks use() use() is unlike any previous React hook. It can be called conditionally, inside loops, and even within if statements — breaking the "rules of hooks" that have governed React since version 16.8. It reads the value of a resource, either a Promise or a Context, and integrates with Suspense boundaries for loading states. import { use , Suspense } from " react " ; function UserProfile ({ userPromise }: { userPromise : Promise < User > }) { const user = use ( userPromise ); return ( < div > < h2 > { user . name } </ h2 > < p > { user . email } </ p > </ div > ); } function App () { const userPr