Introducing React v19: New Experimental Hooks for Data Fetching and Forms

React team announced that version 19 will be released with four new experimental hooks aimed at improving data fetching and form handling.

New Hooks

use – reads values from Promise‑like resources or context.

useOptimistic – enables optimistic UI updates during mutations.

useFormState – updates component state based on form actions.

useFormStatus – provides status information of the last form submission.

use

The use hook can be called with a Promise to suspend rendering until the Promise resolves.

const value = use(resource);

Example with Suspense:

import { use } from 'react';
function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  return
{message}
;
}

useOptimistic

Allows UI to update immediately while the server request runs.

const [optimisticState, addOptimistic] = useOptimistic(state, (curr, next) => [...curr, next]);

Typical shopping‑cart example shows the item appearing instantly before the async request finishes.

useFormState

Imported from react-dom , it returns a state value and an action function that runs when the form is submitted.

const [message, formAction] = useFormState(async (prev, data) => {
  await addToCart(data);
  return 'Added successfully';
}, null);

useFormStatus

Provides { pending, data, method, action } describing the current form submission.

const { pending, data, method, action } = useFormStatus();

It can be used to disable a submit button while a request is pending.

Migration Notes

These hooks are experimental and may change before the final release. The use hook is expected to become the official API for integrating data sources with Suspense. Import useFormState and useFormStatus from react-dom , not from react . The new <form> API accepts an action prop directly, removing previous warnings about invalid values.