react-hook-form

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

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

useFormState({
  name: 'individualInputName'
})

⌨️ fix #4994 typing for watch & getValues (#5005) ✌🏻 close #5001 fix unit test errors object issue 👌 fix use form trigger return type (#5000)

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

🐞 fix #4957 radio/checkbox gets unregistered until all unmounted (#4959)

🐞 fix formState gets reset during shouldUnregister: true mode (#4949)

🐞 fix #4947 with missing register options (#4948)

Revert "🐛 fix toggle Controller value in useFieldArray (#4861)" (#4945) 👻 fix #4938 issue with watch internal measure against components mounted (#4939)

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

⌨️ fix #4895 remove incorrect type for validation return messages

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

🐞 fix #4859 issue with reset trigger unregister subscription (#4860)

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

🙏🏻 fix register option for register validation inputs (#4805) 🐞 fix #4795 isValid not return correctly during onMount useEffect (#4804)

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

🐞 update package.json - fix exports (#4737) ☑️ fix #4375 inline defaultChecked (#4736)

🧑‍💻 improve register DX when ref is not registered (#4733) 👷‍♂️ simplify the build process (#4723) ⌨️ fix typings for watch (#4721) 🐛 fix can not reuse a regexp with g flag as pattern (#4714)

⌨️ fix #4705 watch type for defaultValue (#4707) 🐞 fix #4703 useWatch cache with previous name (#4706) 👻 close #4696 with ref callback type error (#4697) 💪🏻 reduce code check for error object and reduce re-render (#4689) 🏋🏻‍♀️ move error check file to inline and save size (#4685) 🐞 fix #4679 isValid with custom register (#4684) 🐞 fix #4665 input file required validation (#4666)

🐛 fix 4653 valueAsNumber with required validation (#4660) 🐛 fix #4653 by prevent spread primitive data (#4658) 🤙 close #4646 useWatch infinite loop (#4656) 🕹 fix controller's rules type (#4645)

🐞 fix #4627 validate for input number 0 (#4641) 🐞 fix #4617 input date type issue with React (#4640) 🐞 fix #4637 when reset field array with setValue (#4639)

🐞 fix #4628 useController/controller issue with dirtyFields (#4635)

💪🏻 #4603 Should return boolean value "true" for checkbox that has empty string value of attribute "value" (#4614) 🐞 fix #4597 watch intercept dirty return value (#4612) 🐞 fix #4599 useController/Controller type check with render prop (#4600) 💡 refactor: add eslint plugin to sort imports / exports (#4605)

🎉 We are finally here! Version 7! After 2 years of working on this library. We can confident to say this is the best we can offer to everyone on building forms in React. We hope you will enjoy building form in React.

• Strictly typed form
• Reduce package size
• Performance
• Simplicity and consistency

Migration Guide

https://react-hook-form.com/migrate-v6-to-v7

Documentation

https://react-hook-form.com/

💪🏻 close #4543 improve setValue with watched result (#4544) ⌨️ improve useFieldArray type to fix ts recursion error (#4516) ⌨️ change type name for register call back return

⌨️ improve ArrayPath type to support union type (#4493) 🐞 fix #4486 issue with field array not set up default array value (#4495) 🐞 fix #4496 issue with setValue with field array input

🏎 improv controller perf (#4458) 🐞 fix #4476 set array field error (#4479) 🎯 close #4474 improve function invoke consistently (#4481)

🐞 fix #4442 type fix for watch callback (#4450) 🐞 reduce the number of recursion counters for Path type (#4457) 🕹 improve isWeb check to support mini program

📖 improve Path type to support union type (#4435) 🐞 fix disabled input (#4422) 🐞 fix #4433 submitted formState (#4434)

🐞 fix #4410 appending multiple items to a field array results in duplicate items

💪🏻 setValue now embed with register (#4387)

register('test'),
setValue('test', 'value');

// now it's possible to do single action which include the register
setValue('test', 'value');

Changes

• setValue with field array will register all inputs before rendering.

Changes

• append, prepend and insert will register deeply nested inputs at useFieldArray.

Changes

• typescript array index restriction removed.
• append, prepend and insert will register inputs during each action at useFieldArray.

Changes

• change ArrayKey type to number | '${number}'

Changes

• Change useController's meta into fieldState and include formState, these change will be applied to Controller too.

- const { field, meta } = useController({ control });
+ const { field, fieldState, formState } = useController({ control });

Changes

• typescript array index support is changed to 49 instead of 99

• Breaking change: valueAs will be run before the built-in validation and resolver

- <input {...register('test', { validate: (data: string) => {}, valueAsNumber: true })} />
+ <input {...register('test', { validate: (data: number) => {}, valueAsNumber: true })} />

Changes

• useWatch will no longer required defaultValue for field Array

Changes

• Breaking change: shallow merge defaultValues with result (#4074)

useForm({ defaultValues: { test: 'test' } });

getValues(); // v6 will return {}
getValues(); // v7 will return { test: 'test' }