Reusable component with TypeScript generics

[moroshko]

Person component is reused in two different forms:

Person.tsx

import { UseFormReturn } from "react-hook-form";
import { FieldPaths } from "./types";

type Props<TFormValues> = {
  methods: UseFormReturn<TFormValues>;
  fieldPaths: FieldPaths<TFormValues>;
};

const Person = <TFormValues,>({
  methods,
  fieldPaths
}: Props<TFormValues>) => {
  const { register } = methods;

  return (
    <div className="person">
      <div className="name-field">
        <input {...register(fieldPaths.firstName)} placeholder="First name" />
        <input {...register(fieldPaths.lastName)} placeholder="Last name" />
      </div>
      <div className="radio-group">
        <label>
          <input type="radio" value="free" {...register(fieldPaths.status)} />{" "}
          Free
        </label>
        <label>
          <input type="radio" value="busy" {...register(fieldPaths.status)} />{" "}
          Busy
        </label>
      </div>
    </div>
  );
};

export { Person };

SimpleForm.tsx

import { useForm } from "react-hook-form";
import { Person } from "./Person";
import { TPerson } from "./types";
import { emptyPerson } from "./utils";

type SimpleFormValues = {
  person: TPerson;
};

const simpleFormFieldPaths = {
  firstName: "person.name.first",
  lastName: "person.name.last",
  status: "person.status"
} as const;

const SimpleForm = () => {
  const methods = useForm<SimpleFormValues>({
    defaultValues: {
      person: emptyPerson
    }
  });
  const { handleSubmit } = methods;
  const onSubmit = ({ person }: SimpleFormValues) => {
    console.log(JSON.stringify(person, null, 2));
  };

  return (
    <div>
      <h2>Simple form</h2>
      <form method="post" onSubmit={handleSubmit(onSubmit)}>
        <Person methods={methods} fieldPaths={simpleFormFieldPaths} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export { SimpleForm };

ComplexForm.tsx

import { useFieldArray, useForm } from "react-hook-form";
import { Person } from "./Person";
import { TPerson } from "./types";
import { emptyPerson } from "./utils";

type ComplexFormValues = {
  artists: TPerson[];
};

const ComplexForm = () => {
  const methods = useForm<ComplexFormValues>({
    defaultValues: {
      artists: [emptyPerson, emptyPerson, emptyPerson]
    }
  });
  const { control, handleSubmit } = methods;
  const { fields } = useFieldArray({
    control,
    name: "artists"
  });
  const onSubmit = ({ artists }: ComplexFormValues) => {
    console.log(JSON.stringify(artists, null, 2));
  };

  return (
    <div>
      <h2>Complex form</h2>
      <form method="post" onSubmit={handleSubmit(onSubmit)}>
        {fields.map((field, index) => {
          const complexFormFieldPaths = {
            firstName: `artists.${index}.name.first`,
            lastName: `artists.${index}.name.last`,
            status: `artists.${index}.status`
          } as const;

          return (
            <Person
              methods={methods}
              fieldPaths={complexFormFieldPaths}
              key={field.id}
            />
          );
        })}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export { ComplexForm };

types.ts

import { FieldPath } from "react-hook-form";

export type FieldPaths<TFormValues> = {
  firstName: FieldPath<TFormValues>;
  lastName: FieldPath<TFormValues>;
  status: FieldPath<TFormValues>;
};

export type TPerson = {
  name: {
    first: string;
    last: string;
  };
  status: "" | "free" | "busy";
};

utils.ts

import { TPerson } from "./types";

export const emptyPerson: TPerson = {
  name: {
    first: "",
    last: ""
  },
  status: ""
};

It works beautifully, but if I try to setValue in Person, TypeScript throws an error:

const { setValue } = methods;

setValue(fieldPaths.firstName, "David");

Argument of type 'string' is not assignable to parameter of type 'UnpackNestedValue<PathValue<TFormValues, Path>>'

How could I fix this?

CodeSandbox

[leapful]

@moroshko :

You're using Person component as a generic component therefore "setValue" only knows type value following the generic type of "TFormValues".

In case you want to set specific field value of "TFormValues", you need to pass it to Person component too.

Live demo: https://codesandbox.io/s/reusable-react-hook-form-component-with-typescript-generics-forked-69i7ew?file=/src/Person.tsx

[moroshko]

@leapful I can't really pass the value to Person because the value I want to set is fetched from an API by the Person component itself.

I believe what I want is to hint TypeScript that PathValue(TFormValues, typeof fieldPaths.firstName) is always going to be a string, and then it should work, but I'm not sure how to achieve that.

Note: PathValue is defined here.

@bluebill1049 Any ideas?

[swallowtail62]

I too would like to use reusable components.
Is there a good way to use UseFormReturn and generics together?

https://codesandbox.io/s/useformreturn-with-generics-db4i6m?file=/src/App.tsx

[MichaelFD28]

Hey, this is probably a long shot of a question but did you ever figure this one out? I'm having a very similar problem

[swallowtail62]

Unfortunately I haven't been able to resolve this.
Currently, I don't reuse components, but define a new component every time I need it.

[MichaelFD28]

aw bad luck, thanks anyway

…

On Tue, Nov 15, 2022 at 2:01 PM Riku Kobayashi ***@***.***> wrote: Unfortunately I haven't been able to resolve this. Currently, I don't reuse components, but define a new component every time I need it. — Reply to this email directly, view it on GitHub <#8311 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AV33AU54MVTLVDV2WZYPKV3WIOJTZANCNFSM5VE3MVSA> . You are receiving this because you commented.Message ID: <react-hook-form/react-hook-form/repo-discussions/8311/comments/4146807@ github.com>

[davbrito]

Is there any solution to this at this moment?

[firxworx]

@swallowtail62

Going back a few years now I've found that react-hook-form internal types are a hassle and that every time I came up with a working solution with generics it'd get broken in a subsequent patch release. I recall looking at the diffs (at least 2+ years ago now) and remember that what I found led me to conclude it wasn't worth wasting time trying to maintain them.

A tip though --

With react-hook-form I have had far more success using discriminated unions to reuse form fields between create and update contexts because they definitively select between "type A" vs. "type B".

(I assume this might be aligned with your use-case per your limited example)

Here's an example from a boilerplate I'm putting together for ts-rest:

export interface PostFormFieldsCreateProps {
  mode: 'create'
  register: UseFormRegister<PostCreateRequestDto>
  errors: FieldErrors<PostCreateRequestDto>
}

export interface PostFormFieldsUpdateProps {
  mode: 'update'
  register: UseFormRegister<PostUpdateRequestDto>
  errors: FieldErrors<PostUpdateRequestDto>
}

/**
 * Here we use a discriminated union instead of generics based on the `mode` prop (the _discriminant_).
 */
export type PostFormFieldsProps = PostFormFieldsCreateProps | PostFormFieldsUpdateProps

Corresponding fields are the following and there are no type issues with current release versions of everything:

export function PostFormFields({ mode: _mode, register, errors }: PostFormFieldsProps): JSX.Element {
  return (
    <>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="title">Title</Label>
        <Input {...register('title')} />
        {errors.title && <InputError>{errors.title.message}</InputError>}
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="description">Description</Label>
        <Textarea {...register('description')} />
        {errors.description && <InputError>{errors.description.message}</InputError>}
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="content">Content</Label>
        <Textarea {...register('content')} />
        {errors.content && <InputError>{errors.content.message}</InputError>}
      </div>
    </>
  )
}

With this I didn't have to repeat the fields for each create vs. update case.

I actually tried with generics once again and sure enough there were type issues.
If you want high-level form abstractions with generics and strong types (i.e. no breaks with any) I don't think rhf is your library.

I am not actually using the mode discriminant in the above example however in many create vs. update form cases it can be important to have it to create ternary expressions to cleanly implement any differences.

[dd-jonas]

@firxworx I have found a way to work with reusable input components using generics in RHF (https://github.com/orgs/react-hook-form/discussions/9789#discussioncomment-4711065). The trick is to check the generic constraint again. As mentioned in the linked discussion, I still haven't figured out why this is needed.

Example:
https://stackblitz.com/edit/vitejs-vite-pf8hli?file=src%2FEmailInput.tsx

// EmailInput.tsx

import {
  Control,
  Controller,
  UseFormRegister,
  UseFormSetValue,
} from 'react-hook-form';

// The restriction of the reusable component.
// In this case, we want to use this component in forms which have an `email: string` field
type FieldValuesWithEmail = {
  email: string;
};

// We restrict T to have the email field, and use it to pass to generics such as UseFormRegister, UseFormSetValue, Control, etc.
// HOWEVER, while this is the correct approach, this will still result in type errors.
// type Props<T extends FieldValuesWithEmail> = {
//   register: UseFormRegister<T>;
//   setValue: UseFormSetValue<T>;
//   control: Control<T>;
// }

// To fix the above, we have to check for the generic constraint again in each property.
// I have not found an explanation yet why this is necessary.
type Props<T extends FieldValuesWithEmail> = {
  register: T extends FieldValuesWithEmail ? UseFormRegister<T> : never;
  setValue: T extends FieldValuesWithEmail ? UseFormSetValue<T> : never;
  control: T extends FieldValuesWithEmail ? Control<T> : never;
};

export const EmailInput = <T extends FieldValuesWithEmail>({
  register,
  setValue,
  control,
}: Props<T>) => {
  // Example usage of get value
  setValue('email', '');

  return (
    <>
      {/* Example usage of register */}
      <input {...register('email')} />

      {/* Example usage of control */}
      <Controller control={control} name="email" render={() => <></>} />
    </>
  );
};

// App.tsx

export const App = () => {
  const { register, setValue, control } = useForm<{
    email: string;
    username: string;
    password: string;
  }>();

  return (
    <form>
      {/* All methods can be passed without type error */}
      <EmailInput register={register} setValue={setValue} control={control} />
    </form>
  );
}

[dalvallana]

Is it possible not to force the name of the field to be email? Consider the reusable component is a SpecialInput, and I might need 2 or more SpecialInputs in my form. I've tried doing something more generic like:

type FieldValuesWithSpecialInput = {
  [field: string]: string;
};

But TS complains, of course 🙁. So, I guess for now I'll have to add all the field names that want to reuse the component to this type, like:

// add here as optional the name of the fields reusing this component
type FieldValuesWithSpecialInput = {
  field1?: string;
  field2?: string;
};

[kajweb]

This is a method of implementation, which seems to solve my problem, but the principle is unknown.

export type DynamicUseFormReturn<BaseType extends FieldValues, T extends BaseType> = T extends BaseType
  ? UseFormReturn<T>
  : never

[anthonyma94]

Thank you from 2025! Can't believe we still need workarounds for this... Looking into switching to TanStack Forms tbh.

[BrendanC23]

You may want to look into lenses, which is a new way to handle reusable forms.

[anthonyma94]

I took a look into it, I don't understand why it exists. In vanilla JS, reusable form components work perfectly fine (for my usage). So this is a type issue, which shouldn't need an extra package and different syntax to solve.

[EXxZAM]

has anyone found a way to use reusable components with RHF?
i want the useFieldArray and useWatch to also use for the returned value types but i haven't been able to find a way to.
your help is really appreciated!!

type RowData = { color?: string; value: T };

const { fields, append, remove } = useFieldArray<RowData>({
control,
name: props.name,
});

[BrendanC23]

This comment is the best I've seen. There have been many GitHub issues about reusable components, but it hasn't been implemented yet.

[aspirisen]

Hi, I created a PR that demonstrates a Lens approach for building reusable components with TypeScript support #12284