react-hook-form + zod: UseFormReturn<T> vs UseFormReturn<FieldValues, any, T> type mismatch #13033

Khoa-BOB · 2025-08-26T04:57:03Z

Khoa-BOB
Aug 26, 2025

I have the incompatible type issue when using the UseForm.

<html>TS2322: Type 'UseFormReturn&lt;FieldValues, any, T&gt;' is not assignable to type 'UseFormReturn&lt;T&gt;'.<br/>The types returned by 'watch()' are incompatible between these types.<br/>Type 'FieldValues' is not assignable to type 'T'.<br/>'FieldValues' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'FieldValues'.

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import {
  DefaultValues,
  useForm,
  UseFormReturn,
  SubmitHandler,
  FieldValues,
} from "react-hook-form";
import { z, ZodType } from "zod";
import { Describe } from "next/dist/compiled/superstruct";

interface Props<T extends FieldValues> {
  schema: ZodType<T>;
  defaultValues: T;
  onSubmit: (data: T) => Promise<{ success: boolean; error?: string }>;
  type: "SIGN_IN" | "SIGN_UP";
}

const AuthForm = <T extends FieldValues>({
  type,
  schema,
  defaultValues,
  onSubmit,
}: Props<T>) => {
  // 1. Define your form.
  const form: UseFormReturn<T> = useForm({
    resolver: zodResolver(schema),
    defaultValues: defaultValues as DefaultValues<T>, // already typed as DefaultValues<T>
  });
  // 2. Define a submit handler.
  // const handleSubmit: SubmitHandler<T> = async (data) => {};
  return <div>AuthForm -- {type}</div>;
};
export default AuthForm;

KrishnaSaxena108 · 2025-09-23T07:47:28Z

KrishnaSaxena108
Sep 23, 2025

Hi!! @Khoa-BOB

You’re hitting that error because useForm by default returns UseFormReturn, but you’re trying to assign it to UseFormReturn. The generic type parameter isn’t inferred unless you pass it explicitly.

✅ Fix
Tell useForm what type T is:

const form = useForm({
resolver: zodResolver(schema),
defaultValues: defaultValues as DefaultValues,
});

Now form will be UseFormReturn automatically, so you don’t need the explicit type annotation:
const form = useForm({
resolver: zodResolver(schema),
defaultValues: defaultValues as DefaultValues,
});

👉 Just remove the manual annotation and call useForm(). That resolves the TS2322 error.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Hook Form

react-hook-form + zod: UseFormReturn<T> vs UseFormReturn<FieldValues, any, T> type mismatch #13033

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

React Hook Form

react-hook-form + zod: UseFormReturn<T> vs UseFormReturn<FieldValues, any, T> type mismatch #13033

Uh oh!

Khoa-BOB Aug 26, 2025

Replies: 1 comment

Uh oh!

KrishnaSaxena108 Sep 23, 2025

Khoa-BOB
Aug 26, 2025

KrishnaSaxena108
Sep 23, 2025