github react-hook-form/react-hook-form v7.13.0
Version 7.13.0

latest releases: v7.51.4, v7.51.3, v7.51.2...
2 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

  • 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

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)

Don't miss a new react-hook-form release

NewReleases is sending notifications on new releases.