๐ React Hooks for form state management and validation (Web + React Native)
MIT License
Bot releases are visible (Hide)
Published by bluebill1049 about 3 years ago
๐ช 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
Published by bluebill1049 about 3 years ago
๐จโ๐ญ 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
Published by bluebill1049 about 3 years ago
๐ 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)
Published by bluebill1049 about 3 years ago
๐ 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
Published by bluebill1049 about 3 years ago
๐ 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)
Published by bluebill1049 about 3 years ago
๐ [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)
Published by bluebill1049 about 3 years ago
๐ fix: add UnionLike type for FieldErrors type #6381
Published by bluebill1049 about 3 years ago
๐ fix #6403 issue with fields object with getter and setter function (#6407)
โจ๏ธ update watch observer types (#6404)
๐งฅ fix getter and setter consistency (#6408)
Published by bluebill1049 about 3 years ago
๐พ 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)
Published by bluebill1049 about 3 years ago
๐ฅณ 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)
Published by bluebill1049 about 3 years ago
๐ฅณ 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)
Published by bluebill1049 about 3 years ago
๐ 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
Version | Flat (1000) | Nested (1000) | Deeply Nested (1000 * 2 * 2000) | Flat (1000) Mount |
---|---|---|---|---|
7.13.0-next.0 |
18ms | 20ms | 200ms | 470ms (no change) |
7.11.1 |
40ms | 43ms | 2000ms | 470ms |
๐ฆ Package size-reduction
Total Size: 30.3 kB
Filename | Size | Change | |
---|---|---|---|
dist/index.cjs.js |
8.39 kB | -445 B (5%) | โ |
dist/index.esm.js |
13.4 kB | -656 B (4%) | |
dist/index.umd.js |
8.52 kB | -420 B (4%) |
๐ซ Trigger
useFieldArray({ name: 'test' })
trigger('name') // will trigger the whole field array to validate
๐ register
disabled
prop as an option to toggle input disable attributeref
callbackregister('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
disabled
prop to toggle the state subscription.useWatch({ disabled: true }) // you toggle the subscription
โจ๏ธ useFormState
disabled
prop to toggle the state subscription.useFormState({ disabled: true }) // you toggle the subscription
โณ๏ธ setValue
<input {...register('test.0.firstName')} />
setValue('test', [{ firstName: 'bill' }, {firstName: 'kotaro}, {firstName: 'joris'}]) // this will works
โฑ๏ธ 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)
Published by bluebill1049 about 3 years ago
๐ patch remove
, update
API with key id
persist (#6235)
Published by bluebill1049 about 3 years ago
๐ close #6233 for persist field array id (#6234)
๐ enable detect fields unmount at useWatch level (#6226)
Published by bluebill1049 about 3 years ago
๐จ close #6193 to remove shallow merge with defaultValue
with watch
(#6201)
๐จ improve useFieldArray
perf (#6215)
Published by bluebill1049 about 3 years ago
๐ fix #6186 delayError with set error after delay (#6188)
Published by bluebill1049 about 3 years ago
๐จ๏ธ 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)
Published by bluebill1049 about 3 years ago
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
Version | Flat (1000) | Nested (1000) | Deeply Nested (1000 * 2 * 2000) | Flat (1000) Mount |
---|---|---|---|---|
7.13.0-next.0 |
18ms | 20ms | 200ms | 470ms (no change) |
7.11.1 |
40ms | 43ms | 2000ms | 470ms |
๐ฆ Package size-reduction
Total Size: 30.3 kB
Filename | Size | Change | |
---|---|---|---|
dist/index.cjs.js |
8.39 kB | -445 B (5%) | โ |
dist/index.esm.js |
13.4 kB | -656 B (4%) | |
dist/index.umd.js |
8.52 kB | -420 B (4%) |
๐ซ Trigger
useFieldArray({ name: 'test' })
trigger('name') // will trigger the whole field array to validate
๐ register
disabled
prop as an option to toggle input disable attributeref
callbackregister('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
disabled
prop to toggle the state subscription.useWatch({ disabled: true }) // you toggle the subscription
โจ๏ธ useFormState
disabled
prop to toggle the state subscription.useFormState({ disabled: true }) // you toggle the subscription
โณ๏ธ setValue
<input {...register('test.0.firstName')} />
setValue('test', [{ firstName: 'bill' }, {firstName: 'kotaro}, {firstName: 'joris'}]) // this will works
Published by bluebill1049 about 3 years ago
โ๐ป close #6124 move isValid state into a separate function to unblock validation
๐ fix #6105 deep equal issue with undefined node (#6107)
Published by bluebill1049 about 3 years ago
๐ 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)