How to reset a form after submission with Remix

When using a Remix Form you will find that after submission the inputs are not cleared. Here’s how you clear them.

import { useRef, useEffect } from "react";
import { Form, useNavigation } from "@remix-run/react";

const navigation = useNavigation();
const formRef = useRef();
const isSubmitting = navigation.state === "submitting";

useEffect(() => {
  if (!isSubmitting) {
    formRef.current?.reset();
  }
}, [isSubmitting]);

And try not to be like me and forget to add the ref to your Form. I was about to pull my hair out trying to figure out why my form wasn’t clearing.

// Your component where your Form lives

return <Form ref={formRef}></Form>;

We’re currently writing an internal tool at work using Remix and the developer experience has been so good that most of the code has been written by our interns.