react-hook-form

๐Ÿ“‹ React Hooks for forms validation (Web + React Native)

Showing:
Jump to

100 Versions

7.15.3

๐Ÿž 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)

7.15.2

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

7.15.2-beta.0

7.15.1

๐Ÿš€ 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)

7.15.0

๐ŸŽ‡ [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)

7.14.3-beta.0

๐Ÿ”‘ fix: add UnionLike type for FieldErrors type #6381

7.14.2

๐Ÿ› fix #6403 issue with fields object with getter and setter function (#6407) โŒจ๏ธ update watch observer types (#6404) ๐Ÿงฅ fix getter and setter consistency (#6408)

7.14.1

๐Ÿ‘พ 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)

7.14.0

๐Ÿฅณ 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)

7.14.0-next.0

๐Ÿฅณ 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)

7.13.0

๐ŸŽ 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

VersionFlat (1000)Nested (1000)Deeply Nested (1000 2 2000)Flat (1000) Mount
7.13.0-next.018ms20ms200ms470ms (no change)
7.11.140ms43ms2000ms470ms

๐Ÿ“ฆ Package size-reduction

  • 5% package size reduction with compress and gzip

Total Size: 30.3 kB

FilenameSizeChange
dist/index.cjs.js8.39 kB-445 B (5%)โœ…
dist/index.esm.js13.4 kB-656 B (4%)
dist/index.umd.js8.52 kB-420 B (4%)

๐Ÿ”ซ 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)

7.13.0-next.5

๐Ÿž patch remove, update API with key id persist (#6235)

7.13.0-next.4

๐Ÿž close #6233 for persist field array id (#6234) ๐Ÿ„ enable detect fields unmount at useWatch level (#6226)

7.13.0-next.3

๐Ÿจ close #6193 to remove shallow merge with defaultValue with watch (#6201) ๐Ÿ’จ improve useFieldArray perf (#6215)

7.13.0-next.2

๐Ÿž fix #6186 delayError with set error after delay (#6188)

7.13.0-next.1

๐Ÿ–จ๏ธ 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)

7.13.0-next.0

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

VersionFlat (1000)Nested (1000)Deeply Nested (1000 2 2000)Flat (1000) Mount
7.13.0-next.018ms20ms200ms470ms (no change)
7.11.140ms43ms2000ms470ms

๐Ÿ“ฆ Package size-reduction

  • 5% package size reduction with compress and gzip

Total Size: 30.3 kB

FilenameSizeChange
dist/index.cjs.js8.39 kB-445 B (5%)โœ…
dist/index.esm.js13.4 kB-656 B (4%)
dist/index.umd.js8.52 kB-420 B (4%)

๐Ÿ”ซ 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

7.12.2

โœŒ๐Ÿป close #6124 move isValid state into a separate function to unblock validation ๐Ÿž fix #6105 deep equal issue with undefined node (#6107)

7.12.1

๐Ÿž 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)

7.12.1-next.0

7.12.0

โŒš UX: useForm config delayError (#5935)

useForm({
  delayError: 500 // delay error appear with 500ms
})

โŒจ๏ธ stricter type check on onChange event type (#6030) ๐Ÿž fix #6035 issue with Controller select toggle inValid state (#6069) ๐Ÿž fix #6055 missing dirtyFields subscribe in useFieldArray actions (#6059) ๐Ÿž fix #6052 miss marking controller as mounted (#6053)

7.11.2-beta.0

7.11.1

๐Ÿ› fix #5944 reset issue with unmounted useFieldArray (#5954) ๐Ÿ› fix #5942 case when value is supplied as null/undefined โŒจ๏ธ close #5928 improve useWatch and watch types (#5945) ๐ŸŽฎ fix #5936 regression with controller value transform (#5937)

7.11.0

๐Ÿš… update method for useFieldArray (#5835)

const { update } = useFieldArray();

update(0, data); // update an individual field array node

๐Ÿ”„ fix #5911 issue with reset clear flag for Controller (#5912) โŒจ๏ธ fix #5839 issue with null type with deepMap (#5896) ๐ŸšŒ close #5857 setValue missing await with trigger validation (#5859) ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป chore: allow readonly tuple in useWatch generic params (#5845)

7.10.2-beta.0

7.10.1

๐Ÿ—๏ธ fix #5808 DeepMap extend issue with File (#5813) ๐Ÿ•ต๏ธ fix #5816 variable name typo in useController

7.10.1-beta.0

7.10.0

๐ŸŒ deprecated defaultValue at useFieldArray as a required prop (#5636)

function Test() {
  const { control, register } = useForm();
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
    control,
    name: "test",
  });

  return (
    {fields.map((field, index) => (
      <input
        key={field.id} // important to include key with field's id
        {...register(`test.${index}.value`)} 
-        defaultValue={field.value} // no longer required
      />
    ))}
  );
}

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป fix #5787 controller type for defaultValue (#5792) ๐Ÿ˜ฟ fix #5777 regression on unmount defaultValue with shouldUnregister:true (#5778) ๐Ÿ“… close #5724 setValue skip parse date time as object (#5729) ๐ŸŽฎ #5712 enable controller with native validation (#5716) ๐Ÿ› fix spread non-primitive values in nested array fields (#5705) ๐ŸŽช batch single watch update (#5707) ๐ŸŸ๏ธ batch unregister inputs (#5706) ๐Ÿž fix #5699 trigger not focusing first input with error (#5700)

7.9.0

๐Ÿฅ‡ feature: support browser native form control (#5503)

export default function App() {
  const { register, handleSubmit } = useForm({
    shouldUseNativeValidation: true,
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", {
          required: "This is required from bill."
        })}
        autoComplete={"off"}
        placeholder="First Name"
      />
      <input type="submit" />
    </form>
  );
}

๐Ÿž fix #5661 trigger throw error when the field is not found (#5664) ๐Ÿž fix #5678 reset with keep default values with Controller (#5688)

7.8.9-beta.1

  • fix register input without defaultValue for useFieldArray

7.8.9-beta.0

  • deprecate defaultValue as required prop for useFieldArray
function Test() {
  const { control, register } = useForm();
  const { fields } = useFieldArray({
    control,
    name: "test",
  });

  return (
    {fields.map((field, index) => (
      <input
        key={field.id} // important to include key with field's id
        {...register(`test.${index}.value`)} 
-        defaultValue={field.value} // make sure to include defaultValue
      />
    ))}
  );
}

7.8.8

๐Ÿž fix #5627 defaultValue reset inconsistent with setValueAs (#5634)

7.8.7

๐Ÿž fix #5623 Controller unmount to skip validation (#5624)

7.8.6

๐Ÿž fix #5611 should not update dirty fields with blur event (#5614) ๐Ÿž fix #5612 trigger() always return true (#5613)

7.8.5

๐Ÿ’ผ close #5603 to enable nested field array register with useFieldArray ๐Ÿ‘๏ธ improve useController to only return focus method from ref (#5582) ๐Ÿ›๏ธ improve useFieldArray when it's getting unmount and pulling the latest values (#5583)

7.8.4

๐Ÿž fix #5555 register deeply nested field append with strict mode (#5580) ๐Ÿ› fix #5566 should unregister inputs when useFieldArray unmounted (#5579) ๐Ÿ”ข fix #5568 include . for a precise focus index lookup (#5578) ๐Ÿ•ต๏ธโ€โ™€๏ธ improve logic on register absent inputs (#5556) ๐Ÿ‘ฎ fix #5538 type error with setError shouldFocus

7.8.4-beta.0

7.8.3

๐Ÿ› fix #5527 resolver switching (#5530)

7.8.2

๐Ÿ› fix #5507 register with value issue (#5511)

6.15.8

๐Ÿ› fix #5506 watch return null value with field array

7.8.1

๐Ÿ› fix #5499 issue with controller defaultValue overwrite defaultValues at useForm (#5500)

7.8.0

๐Ÿ› fix #5492 with empty reset with useController setting unmount attribute (#5493) ๐Ÿ‘Œ improve logic on unmount input with ref callback (#5488) โšœ๏ธ feature: support shouldTouch with setValue (#5181) โ™ป๏ธ useFieldArray improvement with register value API (#5473) ๐Ÿ’– feature: support register with value (#5380) ๐ŸŒ useFieldArray reduce function (#5471) ๐Ÿช– improve focus logic for field array (#5470) ๐Ÿชข improve register perf and remove duplicated logic (#5469) ๐Ÿงฏ close #5440 remove extra value update (#5442) ๐Ÿ”ฌ remove extra ref assign (#5433) ๐Ÿช Improve isValid form State by removing extra internal formState (#5415)

7.7.2-beta.1

7.7.2-beta.0

7.7.1

๐ŸŽ“ only register absent fields with shouldUnregister: false (#5418)

7.7.0

๐ŸŒŸ feature: focus with trigger (#4960)

trigger('firstName', { shouldFocus: true})

๐Ÿงผ bubble up the error when thrown in submit handler (#5391)

7.6.10

๐Ÿž close #5379 getFieldValueAs return undefined when supplied with undefined (#5381) ๐Ÿ› fix #5382 trigger() return incorrect valid state (#5383)

7.6.9

๐Ÿ› fix #5366 inline defaultValue validation (#5376) โŒจ๏ธ improve controller defaultValue prop type (#5375) ๐Ÿ‹๐Ÿปโ€โ™€๏ธ reduce logic with value check (#5356)

7.6.8

๐Ÿž fix #5361 remove check field logic for getFieldValues (#5363) ๐Ÿž fix #5277 Update value when switch to enabled from initial disabled state (#5350) ๐Ÿ“ฆ update typescript and remove object define in useController (#5353)

7.6.8-beta.0

7.6.7

๐Ÿž fix #5344 avoid re-register inputs (#5345) ๐Ÿ‘Œ close #5283 useFieldArray issue with restrict mode (#5331) ๐Ÿ‹๐Ÿปโ€โ™€๏ธ save esm bundle size (#5327) โŒจ๏ธ accept readonly field path arrays (#5317)

7.6.7-beta.4

7.6.7-beta.3

7.6.7-beta.2

7.6.7-beta.1

7.6.7-beta.0

7.6.6

๐Ÿ› fix #5300 issue with register absent deep nested object (#5302) ๐Ÿ•ต๏ธ close #5297 issue with get with empty path (#5298)

7.6.5

๐Ÿž fix #5286 useWatch with fieldArray inconsistent behaviour (#5287)

7.6.4

๐Ÿž fix #5276 setValue with null (#5278)

7.6.3

๐Ÿž fix #5246 useFieldArray with nested arrays throws error (#5251) ๐Ÿž fix #5262 register checkbox issue with absent register (#5263)

7.6.2

๐Ÿž fix #5234 should render error logic for valid state (#5235) โŒจ๏ธ fix missing-register-options-generic-type (#5238)

7.6.1

๐Ÿž fix #5229 issue with ref becomes undefined (#5233) ๐ŸŽ improve multiple useWatch performances (#5210) ๐Ÿ‘ close #5208 useFieldArray nested object with React.StrictMode (#5209)

7.6.1-beta.1

7.6.0

โœจ useForm register absent defaultValues (#5069)

const App = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      test: { firstName: 'bill', lastName: 'luo' }
    }
  })

  const onSubmit = (data) => {
     // missing registered input will be included
     console.log(data) // { test: { firstName: 'bill', lastName: 'luo' } } 
  }
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("test.firstName")} />
      <button />
    </form>
  )
}

7.5.3

๐Ÿง  close #5162 watch behavior with useFieldArray set to shouldUnregister: true (#5173)

7.5.3-beta.2

7.5.3-beta.1

7.5.3-beta.0

7.5.2

โŒจ๏ธ fix #5122 type issue with the message (#5123)

7.5.2-beta.0

7.5.1

๐Ÿž fix #5096 clearErrors with empty arg (#5098)

7.5.0

๐Ÿž fix #5089 Correct setValue in case update value for field array name (#5092) โœจ close #3956 isSubmitSuccessful set to false when submit Promise failed (#5064) โœจ support validate with error messages (#5088) ๐Ÿ‘Œ improve handleSubmit logic with data gather (#5067) โŒจ๏ธ fix #5065 useController ref type (#5066) โœจ feature: include mount attribute to register field to avoid validation for unmounted inputs (#4785)

7.4.3-beta.4

7.4.3-beta.3

7.4.3-beta.2

7.4.3-beta.1

7.4.3-beta.0

7.4.2

๐Ÿ› fix #5053 useFormState missing name (#5058) ๐Ÿž fix #5051 trigger return with schema (#5052)

7.4.1

๐Ÿž fix [v7]: trigger function always returns false #5043 ๐Ÿž fix #5027 unmounted useFieldArray not remounted with existing values (#5028)

7.4.0

โœจ close #4716 support name prop with useFormState to isolate re-render by name (#4722)

useFormState({
  name: 'individualInputName'
})

7.3.6

โŒจ๏ธ fix #4994 typing for watch & getValues (#5005) โœŒ๐Ÿป close #5001 fix unit test errors object issue ๐Ÿ‘Œ fix use form trigger return type (#5000)

7.3.5

๐Ÿž fix #4966 controller input ref gets overwrite (#4970) ๐ŸŽ‰ close #4988 for parse input value during setValue [JS only] (#4989) ๐Ÿ’ช๐Ÿป improve unregister to info state update (#4962)

7.3.4

๐Ÿž fix #4957 radio/checkbox gets unregistered until all unmounted (#4959)

7.3.3

๐Ÿž fix formState gets reset during shouldUnregister: true mode (#4949)

7.3.2

๐Ÿž fix #4947 with missing register options (#4948)

7.3.1

Revert "๐Ÿ› fix toggle Controller value in useFieldArray (#4861)" (#4945) ๐Ÿ‘ป fix #4938 issue with watch internal measure against components mounted (#4939)

7.3.1-beta.0

7.3.0

๐Ÿ•บ trigger result validation output (#4856)

const output = await trigger('fieldName');

๐Ÿ› fix toggle Controller value in useFieldArray (#4861) ๐Ÿ› fix #4912 watch return undefined due to reset (#4921) ๐Ÿž fix #4929 input freeze with shouldUnregister: true issue with watch useFieldArray (#4930) ๐Ÿ‘ป fix trigger with every filter and update unit tests (#4937)

7.2.4-beta.0

7.2.3

โŒจ๏ธ fix #4895 remove incorrect type for validation return messages

6.15.7

๐Ÿž V6: useFieldArray with nested useFieldArray renders with fields

7.2.3-beta.0

7.2.2

๐Ÿž fix #4865 validation skip for custom set error message (#4892) ๐Ÿงค fix issue with unregister input during watch action (#4890) ๐Ÿ‘Œ fix regression #4885 regression on isDirty (#4886) ๐Ÿคฒ improve behaviour on shouldUnregister (#4876) ๐Ÿž fix #4864 issue with Controller getting unregister with shouldUnreiister: true at useForm (#4873) ๐Ÿ“ผ useForm shouldUnregister: true (#4847)

7.2.2-beta.1

7.2.2-beta.0

7.2.1

๐Ÿž fix #4859 issue with reset trigger unregister subscription (#4860)

7.2.0

๐ŸŽ‰ config shouldUnregister (#4758)

// global config
useForm({
  shouldUnregister: true // default to true
});

// component level 
useController({
  shouldUnregister: true // default to true
})

<Controller shouldUnregister={true} />

useFieldArray({
  shouldUnregister: true // default to true
})

register('name', { shouldUnregister: true  })

๐Ÿž fix #4812 issue with unmounted useFieldArray fetch incorrect value ๐ŸŽ improve perf by skip logic with pure input without validation (#4838) ๐Ÿž fix #4830 getIsDirty() during the reset action (#4836) ๐Ÿž make it work with TaroJs (#4825)

7.1.1

๐Ÿ™๐Ÿป fix register option for register validation inputs (#4805) ๐Ÿž fix #4795 isValid not return correctly during onMount useEffect (#4804)

6.15.6

๐Ÿž fix #4792 issue with nested field array append

7.1.0

โœจ close #4120 useForm setFocus method (#4623) ๐Ÿž fix #4772 reset at root level of registered field (#4784) ๐Ÿž fix #4762 useWatch deep nested object watch (#4764) ๐Ÿž fix #4752 defaultChecked for radio and checkbox (#4756)