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
- 5% package size reduction with compress and gzip
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
- 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