react-hook-form changelog and release notes, page 5 | npm

NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →

7.13.0-next.031 Jul 2021pre-release

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

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

Open source →

7.12.024 Jul 2021

⌚ UX: useForm config delayError (#5935) `tsx useForm({ delayError: 500 // delay error appear with 500ms }) `

⌚ 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)

Open source →

Additional notes

Added

new useForm config delayError

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

Open source →

7.11.012 Jul 2021

🚅 update method for useFieldArray

🚅 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)

Open source →

Additional notes

Added

update method to update an field array inputs

const { update } = useFieldArray();

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

Open source →

7.10.02 Jul 2021Deprecated

🍌 deprecated defaultValue at useFieldArray as a required prop

🍌 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)

Open source →

Additional notes

Changed

defaultValue is no longer a required prop for register input with useFieldArray

Open source →

7.9.019 Jun 2021

🥇 feature: support browser native form control

🥇 feature: support browser native form control (#5503)

<img width="552" alt="Screen Shot 2021-06-19 at 10 26 37 am" src="https://user-images.githubusercontent.com/10513364/122625517-d8030a00-d0e8-11eb-800b-af047c33d916.png">

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)

Open source →

Additional notes

Added

new config at useForm to enabled native browser validation

const { register, handleSubmit } = useForm({
  shouldUseNativeValidation: true,
});

Open source →

7.8.9-beta.016 Jun 2021pre-releaseDeprecated

deprecate defaultValue as required prop for useFieldArray

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
      />
    ))}
  );
}

Open source →

7.8.05 Jun 2021

🐛 fix #5492 with empty reset with useController setting unmount attribute (#5493) 👌 improve logic on unmount input with ref callback (#5488) ⚜️ featur

🐛 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)

Open source →

Additional notes

Added

setValue support shouldTouch to update formState touchFields

setValue('firstName', 'value', { shouldTouch: true });

register now accept value as option

register('firstName', { value: 'value' });

Changed

isValid will initialise as false

Open source →

7.7.029 May 2021

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

🌟 feature: focus with trigger (#4960)

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

🧼 bubble up the error when thrown in submit handler (#5391)

Open source →

Additional notes

Added

trigger support focus with error input

trigger('inputName', { shouldFocus: true });

Changed

handleSubmit will throw error within the onSubmit callback

Open source →

7.6.015 May 2021

✨ useForm register absent defaultValues

✨ 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>
  )
}

Open source →

Additional notes

Changed

useForm will register missing inputs from defaultValues

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>
  );
};

Open source →