react-hook-form

🎉 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 issue with setInternalValue() for array values (#4402)
🐞 fix: prevent cloning objects for class-based instances (#4400)
🐞 fixing Field Array's remove function (#4389)

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

💪🏻 improve setValue to have better support for nested object update e5a22f7

Vision

📖 (DX) Strictly typed form
🏋🏻‍♀️ Reduce package size
🏎 Performance
💁‍♂️ Simplicity and consistency

Documenation

https://react-hook-form-website-git-v7.bluebill1049.now.sh/ (temp URL)

Issues

• close #3719
• close #2887
• close #2086
• close #2155
• close #3538
• close #3110
• close #3698
• close #1680
• close #3155
• close #3045
• close #3525
• close #912

API changes

Changelog will be updated once the V7 branch is merged into the master branch.

• register

- <input ref={register, { required: true }} name="test" />
+ <input {...register('name', { required: true })} /> 

• MutationObserver is removed.
• input name will need to be consistent with '.' syntax instead of [] for the array field, this is to be consistent with typescript usage.

- test[2].test
+ test.2.test

---

valueAs

It will always be run before the build-in validator and resolver.

useForm<{ test: number }>();

<input {...reigster('test', { validate: (data: number) => { console.log(data) } })} /> // the data will be consistent with type declaration.

---

• Controller

- <Controller as={<input />} />
+ <Controller render={({ field }) => <input {...field} />} />

- <Controller render={(props) => <input {...props} />} />
+ <Controller render={({ field, fieldState, formState }) => <input {...field} />} />

fieldState : {
  invalid: boolean;
  isTouched: boolean;
  isDirty: boolean;
  error: FieldError;
}

---

• reset

- reset(values, { isDIrty: true })
+ // second argument is still optional
+ reset(values, { 
+   keepDefaultValues: true, // new
+   keepValues: true, // new
+   keepDirty: true, 
+ })

---

• getValues

const { register, getValues } = useForm({ defaultValues: { test: 'test' } });

console.log(getValues()) // v6 return {}

// v7 return { test: 'test' } and only the first call before the render, the second re-render getValues will read what's in the current view.
console.log(getValues());

return <input {...register('test')} />;

---

• append
• insert
• prepend

append(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
insert(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
prepend(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })

append({
  test: [
    { test: 'name' }
  ]
}) // support deep nested field array

---

• resolver

- resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResult
+ resolver: (
+    values: any, 
+    context?: object, 
+    options: { 
+       criteriaMode?: 'firstError' | 'all', 
+       names?: string[],
+       fields: { [name]: field } // Support nested field
+    }
+  ) => Promise<ResolverResult> | ResolverResult 

---

• watch

React.useEffect(()  => {
  watch((value, { name, type }) => {
    console.log('value', value);
  })
}, [watch])

- watch(['test', 'test1']); // { test: '1', test1: '2' }
+ watch(['test', 'test1']); // ['1', '2']

- watch('test', 'test'); // default value will return when inpu removed
+ watch('test', 'test'); // default value will only return on the initial call before render

---

• trigger

- await trigger('test'); // will return true/false
- trigger('test'); // return void in v7

---

• errors

- const { errors } = useForm();
+ const { formState: { errors } } = useForm();

---

• useFormState

This new hook will allow you to subscribe formState update at the component level instead of the root level where you initialized the useForm. Users will have the capability to subscribe to individual form state at each useFormState.

const { isDirty } = useFormState();

---

• setError

- setError('test', { type: 'type', message: 'issue', shouldFocus: true })
+ setError('test', { type: 'type', message: 'issue' }, { shouldFocus: true })

---

• unregister

unregister: (
  name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[],
  options?: Pick<
    KeepStateOptions, 'keepTouched' | 'keepDirty' | 'keepIsValid' | 'keepErrors'
  >,
) => void

---

• touch

rename touch to touchedFields, keep it consistent with dirtyFields from formState.

---

deafultValues

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

getValues(); // V6 returns {} because nothing is registered

getValues(); // v7 restusn { test: 'test' } because of the shallow merge.

---

Remove console warning

The ES6 module build includes references to process.env.NODE_ENV, which breaks browser usages. We will remove those console.warning for now, until we figure out a better solution in the long run. Also, improve the documentation to fulfill the gap.

---

TS Improvement

• watch
• clearErrors
• setError

---

• remove IE 11 support

🐞 fix missing key for useFieldArray test
🐞 fix #4259 correct unset on field array values (#4262)
🐞 fix #4260 watch missing type for undefined as the first argument (#4261)

🐞 fix #4251 issue with re-render during unmount field array (#4252)
🙏🏻 fix: the issue of unmounted component trying to set state after reset for field arrays (#4150)

🐞 fix #4219 Add default values when validating by using resolver (#4229)
🐞 fix #4170 by removing field array @useEffect with shouldUnregister (#4172)
🐞 fix #4141 remove prod check at useEffect to fix dev/prod inconsistent behavior (#4149)

🐞 fix #4084 useWatch react with typed value (#4085)

✌🏻 close #2516 by look up fieldArray parent node (#4029)
🐞 fix #4019 validate function pass processed value (#4023)
🐞 fix #3985 radio input default state to null instead of empty string (#3988)
🔢 close #3963 valueAsNumber empty string return NaN instead of 0 (#3965)

🎯 close #3908 with nested field value with deep equal (#3910)
🐞 fix #3875 with nested useFieldArray remount (#3900)
🥋 fix #3850 change method from pop to slice (#3866)

🐞 fix #3851 with invalid formState type (#3854)
🐞 fix #3834 dirty fields reset after input unmount with shouldUnregister: false
🐞 fix #3819 issue with dirty fields during swop action (#3824)

🌟 new formState: isValidating (#3672)
🐞 fix #3795 staled field array value (#3798)
🐞 fix #3785 perf issue with setValue deep clone (#3797)
🌵 remove extra ref and update tests (#3734)
👍 close #3712 stop watch trigger re-render with onBlur (#3716)
🐞 fix #3696 issue with get nested field array value (#3703)

🐞 fix #3689 missing id with nested child array (#3690)
🐞 fix #3684 issue validate pattern with value as null (#3685)
📦 close #3677 improve setValue with field array (#3688)
🙄 close #3664 with async useFieldArray remove (#3665)