react-hook-form

📐 fix resetField defaultValue type and reduce any type (#10024)
🐞 fix #9997 issue on the mounted state is updated with values prop (#10001)
Revert "🏍 delete dirty fields node instead of marking as false (#9156)" (#9996)
💅 improve state subscription consistency (#9984)

🐞 fix #9972 input focus with submitted form (#9978)
💉 improve perf & save some bytes (#9968)
🐞 fix #9955 useForm values prop keepDirtyValues not update isDirty (#9959)
🗑️ remove JSX message check (#9921)

📄 Form Component update

• added support for custom fetcher

// axios
<Form 
  action="/api" 
  method="post"
  fetcher={(action, { values }) => axios(action, values)}
/>

// SWR, Tan Query
<Form 
  action="/api" 
  method="post"
  fetcher={(action, { values }) => mutation(action)}
/>

• server error no longer set custom error

Beta documenation: http://localhost:8000/api/useform/form

🗑️ remove JSX message check (#9921)

📄 Form Component

Usage example

• React Web

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm({
  // progressive: true, optional prop for progressive enhancement
});

<Form action="/api" control={control}>
  <input {...register('name')} />

  {isSubmitSuccessful && <p>Form submit successful.<p>}
  
  {errors?.root?.server && <p>Form submit failed.</p>}

  <button>submit</button>
</Form>

• React Native

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

<Form action="/api" control={control} render={({ submit }) => {
  <View>
    {isSubmitSuccessful && <Text>Form submit successful.<Text>}
    
    {errors?.root?.server && <Text>Form submit failed.</Text>}
  
    <Button onPress={() => submit()} />
  </View>
}}/>

Types

• Component props

export type FormProps<
  T extends FieldValues,
  U extends FieldValues | undefined = undefined,
> = Partial<{
  control: Control<T>;
  children?: React.ReactNode | React.ReactNode[];
  render?: (props: {
    submit: (e?: React.FormEvent) => void;
  }) => React.ReactNode | React.ReactNode[];
  onSubmit: U extends FieldValues ? SubmitHandler<U> : SubmitHandler<T>;
  onSuccess: ({ response }: { response: Response }) => void;
  onError: ({
    response,
    error,
  }:
    | {
        response: Response;
        error?: undefined;
      }
    | {
        response?: undefined;
        error: unknown;
      }) => void;
  headers: Record<string, string>;
  validateStatus: (status: number) => boolean;
}> &
  Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError'>;

🐞 fix #9871 issue with error type (#9873)
🐞 fix #9842 clearErrors method does not support global error (#9843)

🌏 feature: support global error type #9746

const onSubmit = async () => {
  const response = await fetch(...)
  if (response.statusCode > 200) {
      setError('root.serverError', { 
        type: response.statusCode,
      })
  }
}

const onClick = () => {
  setError('root.random', { 
    type: 'random', 
  })
}

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root?.serverError?.message}</p>
    <p>{errors.root?.random?.message}</p>
  </>
)

🪜 fix set values for controlled components (#9780)

const { control } = useForm({ values: { test: '' } })
<Controller name="test" /> // no longer throw react warning for uncontrolled become controlled.

🚓 stronger typing to document non-spec attribute uses (#9809)

register('number', {
  valueAsNumber: true,
  pattern: /[1-4]/g // ❌ type error
})

🏋🏻‍♀️ reduce package size (#9778)
🧧 reduce unknown and any (#9816)

thanks to @rekliner

🌏 feature: support global error type #9746

const onSubmit = () => {
  const response = await fetch(...)
  if (response.statusCode > 200) {
      setError('root.serverError', { 
        type: response.statusCode,
        message: e.message,
      })
  }
}

const onClick = () => {
  setError('root.random', { 
    type: 'random', 
    message: 'random' 
  })
}

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root.serverError.message}</p>
    
    <p>{errors.root.random.message}</p>
  </>
)

🪜 fix set defaultValues for controlled components with values props (#9780)

🐞 fix #9773 useFormState missing state update (#9777)
🐞 fix #9765 fix issue with strictMode with isValid state (#9771)

📽 feature: validate function to include form values (#9079)

type FormValues = {
  number1: number;
  number2: number;
};

// Making exported validate function isolated for validation
export function validateNumber(_: number, formValues: FormValues) {
  return formValues.number1 + formValues.number2 === 3;
}

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      number1: 0,
      number2: 0
    }
  });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input
        type="number"
        {...register("number1", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
      <input
        type="number"
        {...register("number2", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
     <button>submit</button>
    </form>
  );
}

🛤️ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540)
🏋🏻‍♀️ reduced code with unset by weight reduction of 1% (#9575)
📔 fix warning for setValue test case
🪜 Improve handleSubmit function by removing swallow runtime error
🙆🏻‍♂️ fix: revert fieldState.invalid deprecated (#9760)
🇪🇸 fix Spanish translation (#9737)

thanks to @SimplyLinn & @Mini-ghost @mango906 @amendezm

🐞 fix #9713 regression on validate function with react native (#9714)

thanks @Moshyfawn

🐞 fix #9709 calling setValue breaks future onChange calls from a Controller (#9710)

thanks @Moshyfawn

📽 feature: validate function to include formValues (#9079)

type FormValues = {
  number1: number;
  number2: number;
};

// Making exported validate function isolated for validation
export function validateNumber(_: number, formValus: FormValues) {
  return formValus.number1 + formValus.number2 === 3;
}

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      number1: 0,
      number2: 0
    }
  });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input
        type="number"
        {...register("number1", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
      <input
        type="number"
        {...register("number2", {
          validate: validateNumber,
          valueAsNumber: true
        })}
      />
     <button>submit</button>
    </form>
  );
}

🛤️ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540)
🏋🏻‍♀️ reduced code with unset by weight reduce of 1% (#9575)
📔 fix warning for setValue test case
🪜 Improve handleSubmit function

thanks to @SimplyLinn & @Mini-ghost

💁‍♂️ close #9684 revert UnPackAsyncDefaultValues to avoid TS breaking change

🤦🏻‍♂️fix #9661 regression on required valueAsNumber (#9662)

🐞 fix #9659 NaN prevent validation update (#9660)
🕯️ close #9524 useWatch return undefined value (#9653)
📖 adjust contributing document (#9641)
💆🏻 fix #9621 with the inline default value (#9622)
🩻 docs: update contribution guidelines (#9605)

thanks to @Mini-ghost and @stefanpl

👉 NEW values props

The following syntax will react to values prop update/changes.

• values will be reactive to update/change and reset accordingly
• provide a reset option to keep dirty/touched values potentially

const values = await fetch('API')

useForm({
  values, // will reset the form when values updates
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

👉 NEW async defaultValues props

The following syntax will support async defaultValues, so we will manage the reset form internally and update formState accordingly.

• promise will only be resolved once during useForm() call
• It's possible to supply resetOptions as well

const { formState: { isLoading } } = useForm({
  defaultValues: fetch('API')
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

React use API

useForm({
  defaultValues: use(fetch('API'))
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

https://user-images.githubusercontent.com/10513364/208200735-6248b069-9b7d-4bd1-9742-55d1ef8d238a.mov

🙋 What's the difference between values and defaultValues

values will react to changes and reflect on the form values, and defaultValues is cached for once and will never re-run the promise or react to defaultValues changes.

⏳ close #9525 add isLoading state for async defaultValues (#9526)
🐞 fix #9581 incorrect type for array of string for message (#9584)
🐞 fix #9571 validation issue with unregister input with valueAsNumber (#9572)
🐞 fix(useWatch): default value for array of inputs (#9555)
📔 fix Controller example using deprecated as prop (#9535)
🐞 fix #9521 isValidting property stuck (#9523)
🔨 feat: Migrate to pnpm (#9516)
🎹 fix #9509 incorrect type for WatchObserver (#9510)
🌳 include flush root render method to createFormControl (#9479)

Huge thanks goes to @nvh95's work on PNPM and also thanks to @bell-steven's contribution

🏃🏻‍♂️ close #9454 set isValid and abort early for the error field (#9457)

• Improved async validation and especially combined with sync ones, which will abort early sync failed first
• IsValid evaluation will abort early if current field validation failed
• apply to both build-in and schema valdiation

https://user-images.githubusercontent.com/10513364/204661619-af11f963-588b-4e15-8699-970e6a40e48b.mov

🐞 fix #9473 avoid update isDirty & dirtyFields unless flag is passed down (#9475)

thanks @blingblingredstar for the verify

Revert "🪶 improve useFormContext perf by avoid reference re-create … …with omit (#9407)"

🚀 fix fieldArray changes only notify relevant subscribers (#9448)
🪶 improve useFormContext perf by avoid reference re-create with omit ( #9407)
💆🏻 fix potential watch() global state overwrite (#9450)
🦏 close #9410 improve UX when subscribe to both isValid and errors state (#9413)
🥨 added eslint rule for no-extra-boolean-cast (#9449)

thanks to @elton-okawa

👍 Improved async defaultValues inference

const fetchData = async () => {
  await sleep(1000)
  return {
    data: 'test'
  }
}

- useForm<Awaited<ReturnTypeof<typeof fetchData>>>({
+ useForm({
  defaultValues: fetchData, // will infer the promise return type
})

👍 Improved useForm resetOptions to keep track of dirty input

- const { formState: { dirtyFields } } = useForm({
+ useForm({ // dirtyFields subscription is no longer required
  values,
  resetOptions: {
    keepDirtyValues; true, // only non dirty input will receive data from the values update
  }
})

🪶 improve useFormContext perf by avoiding reference re-create with omit
🦏 close #9410 improve UX when subscribing to both isValid and errors state (#9413)