react-router-data-mode

To load data automatically before rendering a route in React Router, use `createBrowserRouter` and define a `loader` function in your route object to fetch data declaratively prior to component rendering.

Handle form submissions and data mutations in React Router by defining an `action` function in your route object and using the `Form` component to trigger server-side data updates.

Yes, you can perform non-navigating mutations in React Router by using the `useFetcher` hook, which allows you to submit data and update state without changing the current route.

Implement optimistic UI for form mutations in React Router by reading `fetcher.formData` within your components to render the expected state instantly while the action is processing.

Yes, React Router data mode requires using `createBrowserRouter` to define your routes and `RouterProvider` to wrap your application, enabling declarative data fetching and mutations.

Using route objects with `loader` and `action` properties in React Router simplifies complex data fetching and form handling by coupling data logic directly to route definitions for robust applications.