Data Writes

Data writes (some people call these mutations) in Remix are built on top of two fundamental web APIs: <form> and HTTP. We then use progressive enhancement to enable optimistic UI, loading indicators, and validation feedback—but the programming model is still built on HTML forms.

When the user submits a form, Remix will:

  1. Call the action for the form
  2. Reload all of the data for all of the routes on the page

Many times people reach for global state management libraries in React like redux, data libs like apollo, and fetch wrappers like React Query in order to help manage getting server state into your components and keeping the UI in sync with it when the user changes it. Remix’s HTML based API replaces the majority of use cases for these tools. Remix knows how to load the data as well as how to revalidate it after it changes when you use standard HTML APIs.

There are a few ways to call an action and get the routes to revalidate:

This guide only covers <Form>. We suggest you read the docs for the other two after this guide to get a sense of how to use them. Most of this guide applies to useSubmit but useFetcher is a bit different.

Plain HTML Forms

After teaching workshops with our company React Training for years, we’ve learned that a lot of newer web developers (through no fault of their own) don’t actually know how <form> works!

Since Remix <Form> works identically to <form> (with a couple extra goodies for optimistic UI etc.), we’re going to brush up on plain ol’ HTML forms, so you can learn both HTML and Remix at the same time.

HTML Form HTTP Verbs

Native forms support two HTTP verbs: GET and POST. Remix uses these verbs to understand your intent. If it’s a get, Remix will figure out what parts of the page are changing and only fetch the data for the changing layouts, and use the cached data for the layouts that don’t change. When it’s a POST, Remix will reload all data to ensure it captures the update from the server. Let’s take a look at both.

HTML Form GET

A GET is just a normal navigation where the form data is passed in the URL search params. You use it for normal navigation, just like <a> except the user gets to provide the data in the search params through the form. Aside from search pages, it’s use with <form> is pretty rare.

Consider this form:

  1. <form method="get" action="/search">
  2.   <label>Search <input name="term" type="text" /></label>
  3.   <button type="submit">Search</button>
  4. </form>

When the user fills it out and clicks submit, the browser automatically serializes the form values into a URL search param string and navigates to the form’s action with the query string appended. Let’s say the user typed in “remix”. The browser would navigate to /search?term=remix. If we changed the input to <input name="q"/> then the form would navigate to /search?q=remix.

It’s the same behavior as if we had created this link:

  1. <a href="/search?term=remix">Search for "remix"</a>

With the unique difference that the user got to supply the information.

If you have more fields, the browser will add them:

  1. <form method="get" action="/search">
  2.   <fieldset>
  3.     <legend>Brand</legend>
  4.     <label>
  5.       <input name="brand" value="nike" type="checkbox" />
  6.       Nike
  7.     </label>
  8.     <label>
  9.       <input name="brand" value="reebok" type="checkbox" />
  10.       Reebok
  11.     </label>
  12.     <label>
  13.       <input name="color" value="white" type="checkbox" />
  14.       White
  15.     </label>
  16.     <label>
  17.       <input name="color" value="black" type="checkbox" />
  18.       White
  19.     </label>
  20.     <button type="submit">Search</button>
  21.   </fieldset>
  22. </form>

Depending on which checkboxes the uses clicks, the browser will navigate to URLs like:

  1. /search?brand=nike&color=black
  2. /search?brand=nike&brand=reebok&color=white

HTML Form POST

When you want to create, delete, or update data on your website, a form post is the way to go. And we don’t just mean big forms like a user profile edit page. Even “Like” buttons can be handled with a form.

Let’s consider a “new project” form.

  1. <form method="post" action="/projects">
  2.   <label><input name="name" type="text" /></label>
  3.   <label><textarea name="description"></textarea></label>
  4.   <button type="submit">Create</button>
  5. </form>

When the user submits this form, the browser will serialize the fields into a request “body” (instead of URL search params) and “POST” it to the server. This is still a normal navigation as if the user clicked a link. The difference is two-fold: the user provided the data for the server and the browser sent the request as a “POST” instead of a “GET”.

The data is made available to the server’s request handler so you can create the record. After that, you return a response. In this case, you’d probably redirect to the newly created project. A remix action would look something like this:

  1. export function action({ request }) {
  2.   const body = await request.formData();
  3.   const project = await createProject(body);
  4.   redirect(`/projects/${project.id}`);
  5. }

The browser started at /projects/new, then posted to /projects with the form data in the request, then the server redirected the browser to /projects/123. While this is all happening, the browser goes into it’s normal “loading” state: the address progress bar fills up, the favicon turns into a spinner, etc. It’s actually a decent user experience.

If you’re newer to web development, you may not have ever used a form this way. Lots of folks have always done:

  1. <form
  2.   onSubmit={event => {
  3.     event.preventDefault();
  4.     // good luck!
  5.   }}
  6. />

If this is you, you’re going to be delighted when you see just how easy mutations can be when you just use what browsers (and Remix) have built in!

Remix Mutation, Start to Finish

We’re going to build a mutation from start to finish with:

  1. JavaScript optional
  2. Validation
  3. Error handling
  4. Progressively enhanced loading indicators
  5. Progressively enhanced error display

You use the Remix <Form> component for data mutations the same way you use HTML forms. The difference is now you get access to pending form state to build a nicer user experience: like contextual loading indicators and “optimistic UI”.

Whether you use <form> or <Form> though, you write the very same code. You can start with a <form> and then graduate it to <Form> without changing anything. After that, add in the special loading indicators and optimistic UI. However, if you’re not feeling up to it, or deadlines are tight, just use a <form> and let the browser handle the user feedback! Remix <Form> is the realization of “progressive enhancement” for mutations.

Building the form

Let’s start with our project form from earlier but make it usable:

Let’s say you’ve got the route app/routes/projects/new.js with this form in it:

  1. export default function NewProject() {
  2.   return (
  3.     <form method="post" action="/projects/new">
  4.       <p>
  5.         <label>
  6.           Name: <input name="name" type="text" />
  7.         </label>
  8.       </p>
  9.       <p>
  10.         <label>
  11.           Description:
  12.           <br />
  13.           <textarea name="description" />
  14.         </label>
  15.       </p>
  16.       <p>
  17.         <button type="submit">Create</button>
  18.       </p>
  19.     </form>
  20.   );
  21. }

Now add the route action. Any form submissions that are “post” will call your data “action”. Any “get” submissions (<Form method="get">) will be handled by your “loader”.

  1. import type { ActionFunction } from "remix";
  2. import { redirect } from "remix";
  4. // Note the "action" export name, this will handle our form POST
  5. export const action: ActionFunction = async ({
  6.   request
  7. }) => {
  8.   const formData = await request.formData();
  9.   const project = await createProject(formData);
  10.   return redirect(`/projects/${project.id}`);
  11. };
  13. export default function NewProject() {
  14.   // ... same as before
  15. }

And that’s it! Assuming createProject does what we want it to, that’s all you have to do. Note that no matter what kind of SPA you may have built in the past, you always need a server-side action and a form to get data from the user. The difference with Remix is that’s all you need (and that’s how the web used to be, too.)

Of course, we started complicating things to try to create better user experiences than the default browser behavior. Keep going, we’ll get there, but we won’t have to change any of the code we’ve already written to get the core functionality.

Form Validation

It’s common to validate forms both client-side and server-side. It’s also (unfortunately) common to only validate client-side, which leads to various issues with your data that we don’t have time to get into right now. Point is, if your validating in only one place, do it on the server. You find with Remix that’s the only place you care to anymore (the less you send to the browser the better!).

We know, we know, you want to animate in nice validation errors and stuff. We’ll get to that. But right now we’re just building a basic HTML form and user flow. We’ll keep it simple first, then make it fancy.

Back in our action, maybe we have an API that returns validation errors like this.

  1. const [errors, project] = await createProject(newProject);

If there are validation errors, we want to go back to the form and display them.

  1. export const action: ActionFunction = async ({
  2.   request
  3. }) => {
  4.   const formData = await request.formData();
  5.   const [errors, project] = await createProject(formData);
  7.   if (errors) {
  8.     const values = Object.fromEntries(newProject);
  9.     return { errors, values };
  10.   }
  12.   return redirect(`/projects/${project.id}`);
  13. };

Just like useLoaderData returns the values from the loader, useActionData will return the data from the action. It will only be there if the navigation was a form submission, so you always have to check if you’ve got it or not.

  1. import { redirect, useActionData } from "remix";
  3. export const action: ActionFunction = async ({
  4.   request
  5. }) => {
  6.   // ...
  7. };
  9. export default function NewProject() {
  10.   const actionData = useActionData();
  12.   return (
  13.     <form method="post" action="/projects/new">
  14.       <p>
  15.         <label>
  16.           Name:{" "}
  17.           <input
  18.             name="name"
  19.             type="text"
  20.             defaultValue={actionData?.values.name}
  21.           />
  22.         </label>
  23.       </p>
  25.       {actionData?.errors.name && (
  26.         <p style={{ color: "red" }}>
  27.           {actionData.errors.name}
  28.         </p>
  29.       )}
  31.       <p>
  32.         <label>
  33.           Description:
  34.           <br />
  35.           <textarea
  36.             name="description"
  37.             defaultValue={actionData?.values.description}
  38.           />
  39.         </label>
  40.       </p>
  42.       {actionData?.errors.description && (
  43.         <p style={{ color: "red" }}>
  44.           {actionData.errors.description}
  45.         </p>
  46.       )}
  48.       <p>
  49.         <button type="submit">Create</button>
  50.       </p>
  51.     </form>
  52.   );
  53. }

Notice how we add defaultValue to all of our inputs. Remember, this is regular HTML <form>, so it’s just normal browser/server stuff happening. We’re getting the values back from the server so the user doesn’t have to re-type what they had.

You can ship this code as-is. The browser will handle the pending UI and interruptions for you. Enjoy your weekend and make it fancy on Monday.

Graduate to <Form> and add pending UI

Let’s use progressive enhancement to make this UX a bit more fancy. By changing it from <Form reloadDocument> to <Form>, Remix will emulate the browser behavior with fetch. It will also give you access to the pending form data so you can build pending UI.

  1. import { redirect, useActionData, Form } from "remix";
  3. // ...
  5. export default function NewProject() {
  6.   const actionData = useActionData();
  8.   return (
  9.     // note the capital "F" <Form> now
  10.     <Form method="post">{/* ... */}</Form>
  11.   );
  12. }

HOLD UP! If all you do is change your form to Form, you made the UX a little worse!

If you don’t have the time or drive to do the rest of the job here, use <Form reloadDocument>. This lets the browser continue to handle the pending UI state (spinner in the favicon of the tab, progress bar in the address bar, etc.) If you simply use <Form> without implementing pending UI, the user will have no idea anything is happening when they submit a form.

We recommend always using capital-F Form, and if you want to let the browser handle the pending UI, use the <Form reloadDocument> prop.

Now let’s add some pending UI so the user has a clue something happened when they submit. There’s a hook called useTransition. When there is a pending form submission, Remix will give you the serialized version of the form as a FormData object. You’ll be most interested in the formData.get() method..

  1. import {
  2.   redirect,
  3.   useActionData,
  4.   Form,
  5.   useTransition
  6. } from "remix";
  8. // ...
  10. export default function NewProject() {
  11.   // when the form is being processed on the server, this returns different
  12.   // transition states to help us build pending and optimistic UI.
  13.   const transition = useTransition();
  14.   const actionData = useActionData();
  16.   return (
  17.     <Form method="post">
  18.       <fieldset
  19.         disabled={transition.state === "submitting"}
  20.       >
  21.         <p>
  22.           <label>
  23.             Name:{" "}
  24.             <input
  25.               name="name"
  26.               type="text"
  27.               defaultValue={
  28.                 actionData
  29.                   ? actionData.values.name
  30.                   : undefined
  31.               }
  32.             />
  33.           </label>
  34.         </p>
  36.         {actionData && actionData.errors.name && (
  37.           <p style={{ color: "red" }}>
  38.             {actionData.errors.name}
  39.           </p>
  40.         )}
  42.         <p>
  43.           <label>
  44.             Description:
  45.             <br />
  46.             <textarea
  47.               name="description"
  48.               defaultValue={
  49.                 actionData
  50.                   ? actionData.values.description
  51.                   : undefined
  52.               }
  53.             />
  54.           </label>
  55.         </p>
  57.         {actionData && actionData.errors.description && (
  58.           <p style={{ color: "red" }}>
  59.             {actionData.errors.description}
  60.           </p>
  61.         )}
  63.         <p>
  64.           <button type="submit">
  65.             {transition.state === "submitting"
  66.               ? "Creating..."
  67.               : "Create"}
  68.           </button>
  69.         </p>
  70.       </fieldset>
  71.     </Form>
  72.   );
  73. }

Pretty slick! Now when the user clicks “Create”, the inputs go disabled, and the submit button’s text changes. The whole operation should be faster now too since there’s just one network request happening instead of a full page reload (which involves potentially more network requests, reading assets from the browser cache, parsing JavaScript, parsing CSS, etc.).

We didn’t do much with transition on this page, but it’s got all the information about the submission on transition.submission, including all of the values being processed on the server on submission.formData.

Animating in the Validation Errors

Now that we’re using JavaScript to submit this page, our validation errors can be animated in because the page is stateful. First we’ll make a fancy component that animates height and opacity:

  1. function ValidationMessage({ error, isSubmitting }) {
  2.   const [show, setShow] = useState(!!error);
  4.   useEffect(() => {
  5.     const id = setTimeout(() => {
  6.       const hasError = !!error;
  7.       setShow(hasError && !isSubmitting);
  8.     });
  9.     return () => clearTimeout(id);
  10.   }, [error, isSubmitting]);
  12.   return (
  13.     <div
  14.       style={{
  15.         opacity: show ? 1 : 0,
  16.         height: show ? "1em" : 0,
  17.         color: "red",
  18.         transition: "all 300ms ease-in-out"
  19.       }}
  20.     >
  21.       {error}
  22.     </div>
  23.   );
  24. }

Now we can wrap our old error messages in this new fancy component, and even turn the borders of our fields red that have errors:

  1. export default function NewProject() {
  2.   const transition = useTransition();
  3.   const actionData = useActionData();
  5.   return (
  6.     <Form method="post">
  7.       <fieldset
  8.         disabled={transition.state === "submitting"}
  9.       >
  10.         <p>
  11.           <label>
  12.             Name:{" "}
  13.             <input
  14.               name="name"
  15.               type="text"
  16.               defaultValue={
  17.                 actionData
  18.                   ? actionData.values.name
  19.                   : undefined
  20.               }
  21.               style={{
  22.                 borderColor: actionData?.errors.name
  23.                   ? "red"
  24.                   : ""
  25.               }}
  26.             />
  27.           </label>
  28.         </p>
  30.         {actionData?.errors.name && (
  31.           <ValidationMessage
  32.             isSubmitting={transition.state === "submitting"}
  33.             error={actionData?.errors?.name}
  34.           />
  35.         )}
  37.         <p>
  38.           <label>
  39.             Description:
  40.             <br />
  41.             <textarea
  42.               name="description"
  43.               defaultValue={actionData?.values.description}
  44.               style={{
  45.                 borderColor: actionData?.errors.description
  46.                   ? "red"
  47.                   : ""
  48.               }}
  49.             />
  50.           </label>
  51.         </p>
  53.         <ValidationMessage
  54.           isSubmitting={transition.state === "submitting"}
  55.           error={actionData?.errors.description}
  56.         />
  58.         <p>
  59.           <button type="submit">
  60.             {transition.state === "submitting"
  61.               ? "Creating..."
  62.               : "Create"}
  63.           </button>
  64.         </p>
  65.       </fieldset>
  66.     </Form>
  67.   );
  68. }

Boom! Fancy UI without having to change anything about how we communicate with the server. It’s also resilient to network conditions that prevent JS from loading.

Review

  • First we built the project form without JavaScript in mind. A simple form, posting to a server-side action. Welcome to 1998.

  • Once that worked, we used JavaScript to submit the form by changing <form> to <Form>, but we didnt’ have to do anything else!

  • Now that there was a stateful page with React, we added loading indicators and animation for the validation errors by simply asking Remix for the state of the transition.

From your components perspective, all that happend was the useTransition hook caused a state update when the form was submitted, and then another state update when the data came back. Of course, a lot more happened inside of Remix, but as far as your component is concerned, that’s it. Just a couple state updates. This makes it really easy to dress up any user flow.

See also