react-hook-form

🪄 feat: Ability to provide custom onBlur and onChange handlers (#5620)

<input
  type="text"
  {...register('test', {
    onChange: (e) => {},
    onBlur: (e) => {},
  })}
/>

🗺️ fix Mapped types for defined value type with interface (#6605)
🏥 close #6590 prevent error throw by missing input with trigger API (#6591)

Thanks to @kotarella1110 @exneval @michalbundyra

👨‍🏭 close #6581 by register input with setValue to improve DX for missing registered inputs (#6582)
💉 include unit test for #6581 setValue with missing input
🐞 fix #6573 calling setValue from useEffect at mount does not update controller value (#6578)
⌚️ close #6548 watch, reset with shouldUnregister: true by trigger extra re-render to flush out the current form values (#6549)
🐞 fix async useFieldArray actions (#6540)
🔖 fix typos in examples and source code (#6531)
💉 replace updateValues with cloneObject (#6530)

Thanks, @frankie303

🐞 fix #6528 async reset update isMounted when isValid is not subscribed (#6529)
🐞 fix #6513 reset config keepValues update formValues (#6524)
🐞 fix #6482 reset formValues with shouldUnregister: true (#6512)
🐞 fix #6509 return defaultValues when components are not mounted (#6511)
🔨 proper fix for useController default value update (#6510)

🐞 fix #2655 disabled input should set to undefined (#6501)
🐞 improve ControllerFieldState type for Controller types (#6500)
🐞 add File and FileList interface for ReactNative (#6495)

Thanks, @kotarella1110

🚀 fix: add UnionLike type for FieldErrors and FieldNamesMarkedBoolean type (#6381)
💻 ci: update from ubuntu-16.04 to ubuntu-latest (#6485)
🐞 fix handleChange to set undefined value (#6481)
🐞 fix #6473 isMount flag for useWatch value subscription (#6474)
🐞 fix #6469 schema checkbox validation incorrect parent node lookup (#6471)

🎇 [useFieldArray] new method replace() (#6304)

const { control } = useForm({
  defaultValues: {
    test: [{ value: 'lorem' }, { value: 'ipsum' }]
  }
});
const { fields, replace } = useFieldArray({ 
  control, 
  name: 'test'
});

const handleFullyReplacement = (): void => {
  // remove old and set fully new values
  replace([{ value: 'dolor' }, { value: 'sit' }, { value: 'amet' }]);
}

🐞 fix #6379 toggle disabled props with register api (#6459)
🗺️ improve Mapped types (#6451)
🗝️ refactor: improve NestedValue type (#6449)
🗝️ feat: improve PathValue type to fully support union type (#6431)

🔑 fix: add UnionLike type for FieldErrors type #6381

🐛 fix #6403 issue with fields object with getter and setter function (#6407)
⌨️ update watch observer types (#6404)
🧥 fix getter and setter consistency (#6408)

👾 improve change event perf (#6373)
🐞 fix #6379 when disabled is not return from the DOM attribute (#6380)
🧻 code improvement and size reduction (#6372)
🎮 prevent controller with TypeError: e.focus is not a function (#6386)
Revert "🎹 fix #6265 objects may have error messages (#6275)" (#6391)

🥳 feature: add dependent validation - run a dependent field's validation after another field's validation runs (#6141)

const App = () => {
  const { register, getValues } = useForm();

  return (
    <form>
      <input
        {...register('firstName', {
          validate: (value) => {
            return getValues('lastName') === value;
          }
        })}
      />
      <input {...register('lastName', { deps: ['firstName'] })} /> // dependant validation
    </form>
  );
};

🦆 close #6319 remove shallow clone with watch return value (#6336)
🗝️ fix #6320 type issue with provider context (#6326)
🎛️ fix #6335 useController only update field ref #6341
🎮 close #6328 useController set defaultValue to be part of formValues (#6329)
📭 close #6367 missing absent empty object and array input from defaultValues (#6368)

🥳 feature: add dependent validation - run a dependent field's validation after another field's validation runs (#6141)

const App = () => {
  const { register, getValues } = useForm();

  return (
    <form>
      <input
        {...register('firstName', {
          validate: (value) => {
            return getValues('lastName') === value;
          }
        })}
      />
      <input {...register('lastName', { deps: ['firstName'] })} /> // dependant validation
    </form>
  );
};

🦆 close #6319 remove shallow clone with watch return value (#6336)
🗝️ fix #6320 type issue with provider context (#6326)
🎛️ fix #6335 useController only update field ref #6341
🎮 close #6328 useController set defaultValue to be part of formValues (#6329)

🏎 Performance enhancement at scale

React hook from is getting a general performance upgrade and enhancement. The following API will get big performance improvement at scale, which means it may not improve on small or medium-size applications, but rather large and complex applications with subscriptions.

• useWatch
• useFieldArray
• watch
• getValues

Result Env: dev build + throttle 4x CPU + Chrome + MAC M1

📦 Package size-reduction

• 5% package size reduction with compress and gzip

Total Size: 30.3 kB

🔫 Trigger

• Trigger will enable object name trigger and field array name trigger

useFieldArray({ name: 'test' })

trigger('name') // will trigger the whole field array to validate

📑 register

• added a disabled prop as an option to toggle input disable attribute
• register will be able to seek input DOM reference through the ref callback

register('test', { disabled: true }) // will set value to undeinfed and pass disabled down to the input attribute

<div {...register('test')}>
  <input name="test" /> // this input will be registered
</div>

👀 useWatch

• added disabled prop to toggle the state subscription.

useWatch({ disabled: true }) // you toggle the subscription

⌨️ useFormState

• added disabled prop to toggle the state subscription.

useFormState({ disabled: true }) // you toggle the subscription

⛳️ setValue

• allow set value for non-registered inputs include nested object and array field.

<input {...register('test.0.firstName')} />

setValue('test', [{ firstName: 'bill' }, {firstName: 'kotaro}, {firstName: 'joris'}]) // this will works

Resolved issues:

⏱️ close #6296 abort validation early when disable prop is detected (#6300)
🎹 fix #6265 objects may have error messages (#6275)
🔄 fix #6277 track async validate to trigger state update (#6284)
🐞 fix #6272 only flush field array when subscription name match (#6281)
💪🏻 simplify fillEmptyArray and combine focus name (#6237)
🌵 remove redundant code for useFieldArray (#6236)
🐞 patch remove, update api with key id persist (#6235)
🐞 close #6233 for persist field array id (#6234)
🍄 enable detect fields unmount at useWatch level (#6226)
💨 improve useFieldArray perf (#6215)
🍨 close #6193 to remove shallow merge with defaultValue with watch (#6201)
🐞 fix #6186 delayError with set error after delay (#6188)
☄️ enhance unregister unmount inputs by combining its logic (#6185)
🖨️ include reset clone value for array/object/date (#6183)
👨🏻‍🔧 fix rendering order with useFieldArray (#6182)
🎭 skip the shallow clone with useForm return (#6154)
⌨️ fix: WatchObserver info name type (#6171)

🐞 patch remove, update API with key id persist (#6235)

🐞 close #6233 for persist field array id (#6234)
🍄 enable detect fields unmount at useWatch level (#6226)

🍨 close #6193 to remove shallow merge with defaultValue with watch (#6201)
💨 improve useFieldArray perf (#6215)

🐞 fix #6186 delayError with set error after delay (#6188)

🖨️ include reset clone value for array/object/date (#6183)
👨🏻‍🔧 fix rendering order with useFieldArray (#6182)
🎭 skip the shallow clone with useForm return (#6154)
⌨️ fix: WatchObserver info name type (#6171)

This new release is going to be quite an improvement over the existing version. We will start with next (beta) version.

🏎 Performance enhancement at scale

React hook from is getting a general performance upgrade and enhancement. The following API will get big performance improvement at scale, which means it may not improve on small or medium-size applications, but rather large and complex applications with subscriptions.

• useWatch
• useFieldArray
• watch
• getValues

Result Env: dev build + throttle 4x CPU + Chrome + MAC M1

📦 Package size-reduction

• 5% package size reduction with compress and gzip

Total Size: 30.3 kB

🔫 Trigger

• Trigger will enable object name trigger and field array name trigger

useFieldArray({ name: 'test' })

trigger('name') // will trigger the whole field array to validate

📑 register

• added a disabled prop as an option to toggle input disable attribute
• register will be able to seek input DOM reference through the ref callback

register('test', { disabled: true }) // will set value to undeinfed and pass disabled down to the input attribute

<div {...register('test')}>
  <input name="test" /> // this input will be registered
</div>

👀 useWatch

• added disabled prop to toggle the state subscription.

useWatch({ disabled: true }) // you toggle the subscription

⌨️ useFormState

• added disabled prop to toggle the state subscription.

useFormState({ disabled: true }) // you toggle the subscription

⛳️ setValue

• allow set value for non-registered inputs include nested object and array field.

<input {...register('test.0.firstName')} />

setValue('test', [{ firstName: 'bill' }, {firstName: 'kotaro}, {firstName: 'joris'}]) // this will works

✌🏻 close #6124 move isValid state into a separate function to unblock validation
🐞 fix #6105 deep equal issue with undefined node (#6107)

🐞 fix #6090 issue with set defaultValue as string with valueAs (#6093)
🐞 make sure the field is set before setting it to mounted (#6084)
🐞 fix #6081 issue with delayError with formState (#6083)