Should the overusage of Formprovider and useFormContext be avoided?

[philipp-merk-neuravity]

Hi, we intend to use react-hook-form for hundreds of forms for our large application. Each form is around 10-50 fields big. I thought of reducing redundancy by creating a Wrapper for controlled and uncontrolled components:

// Controlled Component Wrapper

const FormAutocomplete = ({ disabled, name, items, label }: FormAutocompleteProps) => {
  const { control } = useFormContext<FieldValues>();
  
  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, value }, fieldState: { error } }) => (
        <Autocomplete
          errorText={error?.message}
          label={label}
          items={items}
          selectedItems={value}
          onSelectedItemsChange={onChange}
          disabled={disabled}
        />
      )}
    />
  );
};

// Uncontrolled Component Wrapper

const FormTextField = <FormSchema extends object>({ name, ...rest }: FormTextFieldProps<FormSchema>) => {
  const {
    register,
    formState: { errors },
  } = useFormContext();
  const error = errors[name as string] as FieldError | undefined;

  return <TextField errorText={error?.message} {...register(name as string)} {...rest} />;
};

I did not notice unnecessary rerendering on components grouped inside of the Formprovider, if another components onChange function is being called.

I also thought of creating another Wrapper without the usage of the Formprovider where "control" and "register" would be passed as a Prop for each component, if certain limitations are met.

Would you consider this as a valid approach or should the FormProvider only be used for nested structures?

Thank you!