Accessing action data with useActionData
Action data is accessed in the route component using the `useActionData` hook, which returns the data returned by the action.
React Router · Getting started · all subjects
actions/data
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Accessing action data with fetcher.data
When using a fetcher to call an action, the returned data is available through the `fetcher.data` property.
useActionData example
This example shows using useActionData in a component: `function Project() { let actionData = useActionData(); return <div>{actionData ? <p>{actionData.title} updated</p> : null}</div>; }`
Automatic data revalidation after actions
After an action completes, React Router automatically revalidates all loaders for the data on the page to get the latest values. This is equivalent to re-fetching data without explicit code. Sidebar data automatically updates when forms are submitted because of this automatic revalidation.
FormData API for accessing form field values
In action functions, use `await request.formData()` to get a FormData object. Access individual fields with `formData.get(name)` for single values or `formData.getAll(name)` for multiple. Convert to object with `Object.fromEntries(formData)` to get all fields as key-value pairs.
useFetcher formData for optimistic updates
The useFetcher hook provides access to FormData being submitted through fetcher.formData. You can read values from this FormData to immediately update the UI with optimistic values before the network request completes. If the update eventually fails, the UI will automatically revert to the real data from the server.
Reading favorite state from fetcher.formData example
This example shows how to implement optimistic UI updates for a favorite toggle. The Favorite component uses useFetcher and reads the 'favorite' form field value from fetcher.formData when available, falling back to contact.favorite if no form data exists. The star icon (★ or ☆) updates immediately when clicked, before the network response returns.