react router dom v6 + react hook form BOOM

[tastafur]

If you want to use the full power of react router dom, react router dom will control the form and submit, so it will share responsibility with react form hook and this leads to inefficiencies and problems. It cannot be that the most powerful routing library and the most powerful form control and validation library do not have any type of integration for v6 of react router and thus the two libraries can work together in optimal conditions. The two development teams behind these marvelous libraries should be talked about and that react router dom encourages integration with third parties so that their system works well.

remix-run/react-router#10080
remix-run/react-router#10079

[leapful]

@tastafur

Could you please describe more details what you want achieve with react router v6 and react-hook-form ? A codesandbox to show the problem will be helpful.

Since routing library and form library are solving different use case, it always depends on developer logic implementation, not the libraries itself.

[tastafur]

These weeks that I am implementing this part I will give you an example of how both react-router-dom controls the form due to its evolution in version 6 and you, which is logical, control the form and this in turn creates an overlap of shared responsibility and Its drawbacks for the implementation of the form control

[craigmcc]

Personally, I think v6 of react-router is reaching way beyond the original purpose of managing "routing", trying to be something like react-query and redux as well.

When I upgraded to v6, I just kept using it to manage routing, and kept all my forms stuff in RHF instead of trying to migrate to v6.

[tastafur]

As you say, its responsibility has increased and it no longer focuses only on routing, it tries to manage the effects of the application, synchronizing the load through actions linked to the form, but at the same time it takes responsibility for the form control, what a good use that can provide libraries such as react hook form + yup, so it gives you a handling of load flows + actions but at the same time breaks control of the forms. As I am setting up a new project with version 6, I like the flow controls but the form validations are loaded, let's see if I can somehow use the two positive things that react router v6 and react form hook give but I see it difficult, because the problem is that both use the submit function

[hungify2022]

Any updates
I have a problem with it. I don't know how to make these work together

import { useForm } from "react-hook-form";
import {
  Form,
  redirect,
  useFormAction,
  useLoaderData,
  useNavigate,
  useSubmit,
} from "react-router-dom";
import { createContact } from "../../contacts";

export async function newContactAction({ request, params }) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  console.log("🚀 :: file: new.jsx:15 :: data:", data);
  const newContact = await createContact(data);
  return redirect(`/contacts/${newContact.id}`);
}

export default function NewContact() {
  const contact = useLoaderData();
  const navigate = useNavigate();
  const submit = useSubmit();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data, e) => {
    submit(e.currentTarget, {
      data,
    });
  };

  return (
    <Form
      action="/contacts/new"
      method="post"
      id="contact-form"
      onSubmit={handleSubmit(onSubmit)}
    >
      <div>
        <span>Name</span>
        <div className="group-item">
          <div>
            <input
              placeholder="First"
              aria-label="First name"
              type="text"
              name="first"
              {...register("first", {
                required: "This field is required",
              })}
            />
            {errors.first && (
              <p role="alert" className="error">
                {errors.first?.message}
              </p>
            )}
          </div>
        </div>
      </div>
      <div>
        <button type="submit">Save</button>
        <button
          type="button"
          onClick={() => {
            navigate(-1);
          }}
        >
          Cancel
        </button>
      </div>
    </Form>
  );
}

[hungify2022]

I use manual validation by trigger but how can I prevent action if it is not valid?

[hungify2022]

I use manual validation by trigger but how can I prevent action if it is not valid?

trigger returns a promise that resolves to true if it is invalid. So you can await it and skip calling submit if it is invalid.

Nice ❤️

To achieve that let's update like below

Use native form instead of Form

<form
      id="contact-form"
      onSubmit={(e) => onSubmit(e)}
    >

use useSubmit equivalent to

<Form
      action="/contacts/new"
      method="post"
      id="contact-form"
      onSubmit={(e) => onSubmit(e)}
    >

const submit = useSubmit();

const onSubmit = async (e) => {
    const isValid = await trigger();
    e.preventDefault();
    if (isValid) {
      const values = getValues(); // `getValues`  from `useForm`
      submit(values, {
        action: "/contacts/new",
        method: "post",
      });
    }
  };

[pincoin]

@hungify2022
I wrote my code with<Form> but it works fine.

    <Form
          method="post"
          onSubmit={formSubmitHandler}
          className="flex-1 flex flex-col gap-y-4"
        > 

  const formSubmitHandler = async (event) => {
    event.preventDefault();

    if (isValid) {
      submit(event.currentTarget);
    }

    // if invalid, show all errors.
    await trigger();
  };

formState.isSubmitting doesn't work. so, I used navigation.state from react-router-dom.

  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

I believe that it will be good if react-router-dom is in charge of form action, and react-hook-form is in charge of validation.

[Vinorcola]

I have solved the issue by using a custom Form component:

import { zodResolver } from "@hookform/resolvers/zod"
import { ReactNode } from "react"
import { FieldErrors, UseFormRegister, useForm } from "react-hook-form"
import { useSubmit } from "react-router-dom"
import { ZodType, z } from "zod"

interface Props<Validator extends ZodType<any, any, any>> {
    validator: Validator
    children: (register: UseFormRegister<z.infer<Validator>>, errors: FieldErrors<z.infer<Validator>>) => ReactNode
}

export default function Form<Validator extends ZodType<any, any, any>>(props: Props<Validator>) {
    const submit = useSubmit()
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<z.infer<Validator>>({ resolver: zodResolver(props.validator) })

    return (
        <form
            method="post"
            onSubmit={(event) => {
                const target = event.currentTarget
                handleSubmit(() => {
                    submit(target, { method: "post" })
                })(event)
            }}
        >
            {props.children(register, errors)}
        </form>
    )
}

This component can be used like this:

import clsx from "clsx"
import { redirect, ActionFunctionArgs, useNavigation } from "react-router"
import { ulid } from "ulid"
import { z } from "zod"

import Form from "./Form"

const validation = z.object({
    firstName: z.string().trim().nonempty(),
    lastName: z.string().trim().nonempty(),
})

type FormData = z.infer<typeof validation>

export async function action({ request }: ActionFunctionArgs) {
    const formData = Object.fromEntries(await request.formData()) as FormData
    const id = ulid()

    // Register logic here

    return redirect(`../${id}`)
}

export default function Add() {
    const { state } = useNavigation()

    return (
        <Form validator={validation}>
            {(register, errors) => (
                <>
                    <label className="label" htmlFor="firstName">
                        <span className="label-text">First name</span>
                    </label>
                    {errors.firstName && <p className="text-sm italic text-error">{errors.firstName.message}</p>}
                    <input
                        id="firstName"
                        {...register("firstName")}
                        type="text"
                        className={clsx("input input-bordered", {
                            "input-error": !!errors.firstName,
                        })}
                    />

                    <label className="label" htmlFor="lastName">
                        <span className="label-text">Last name</span>
                    </label>
                    {errors.lastName && <p className="text-sm italic text-error">{errors.lastName.message}</p>}
                    <input
                        id="lastName"
                        {...register("lastName")}
                        type="text"
                        className={clsx("input input-bordered", {
                            "input-error": !!errors.lastName,
                        })}
                    />

                    <button type="submit" className="btn btn-primary" disabled={state === "submitting"}>
                        {state === "submitting" && <span className="loading loading-spinner loading-sm" />}
                        Save
                    </button>
                </>
            )}
        </Form>
    )
}

[le-huy-jh]

It's definitely terrible in v6. Why react router want to become a form library?

[jordiyapz]

If you have used Remix, you will know why. It provides seamless integration of server action and Form data that works even without Javascript.

[wassupduck]

import { useForm } from "react-hook-form";
import { useSubmit } from "react-router-dom";

export async function action({ request }) {
  const data = await request.json();
}

export default function App() {
  const { register, handleSubmit } = useForm();
  const submit = useSubmit();

  const onSubmit = (data) => {
    submit(data, {
      method: "post",
      action: "/",
      encType: "application/json",
    });
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("example")} />
      <input type="submit" />
    </form>
  );
}