react-hook-form

🐞 fix #2403 issue with re-render valid formState in useFieldArray (#2418)
👨🏻‍💻 revert getValues defaultValues update (#2404)
🐞 fix 2406 with Controller's mode for all (#2407)

🐞 fix #2395 bug with isDirty due to useFieldArray delete (#2396)

🐞 fix #2382 issue with defaultValues inside submit values (#2390)
😬 fixed dirty bugs with useFieldArray (#2368)
🧪 increase test coverage (#2385)

🐞 fix #2310 useWatch with useFieldArray delete (#2358)
🐞 fix 2336 with set setValue (#2344)
👻 enhance getValues() #2308 (#2359)
👻 fixed #2339 (#2360)
🦟 fix #2312 issue useFieldArray with react beautiful DND (#2313)
🎯 allow resolver to be sync or async (#2305)
🧙‍♂️ increased test coverage

🦊 fix firefox setDirty issue (#2277)
⌨️ fix type for MutationObserver observe method
🤝 improve watch internal (#2270)
🐞 fix the issue with getValues nested object wth shouldUnregister to false (#2278)
🧙‍♂️ increase unit tests coverage

🐞 fix #2246 issue with watch with null value (#2248)
🐞 fix #2240 issue with unmounted data gets updated when shouldUnregister
⌨️ expose ArrayField type (#2254)
🐞 fix UnpackNestedValue type (#2263)
🛎 support multiple errors message for an individual type (#2247)
🐞 fix #2257 nested field array remove error (#2260)
🐞 fix #2017 issue with move and default value to undefined (#2265)
🧙‍♂️ increase unit tests coverage

🐞 fix #2220 with getValues() (#2230)

🐞 fix #2191 with unset nested error (#2207)
🧙‍♂️ improved handleChangeRef test (#2204)
🐞 fixed useForm test bugs (#2189)
💥 improved bundle size with production code (#2183)
🐞 fix #2153 issue with reValidate blur mode (#2175)
🐞 fix getValues when shouldUnregister set to false (#2166)
🐞 fix #2160 issue with useFieldArray move and swap (#2161)

🐞 fix #2160 issue with useFieldArray move and swap

🏵 unlock onFocus feature for RN (#2148)
🐞 fix Controller checked prop (#2140)
🦟 fix #2131 watch fields not updated with HMR (#2145)
🐞 fix useWatch with useFieldArray re-render issue (#2123)

🐞 fix #2050 update dirty when input unmount (#2054)
🎃 fixed isDirty (#2055)
🪒 remove unnecessary deps in useForm hook (#2047)
🐞 fix #2081 with useWatch and reset API (#2085)
🎷 close #2037 with RN handleSubmit arg empty object (#2093)
🛎 close #2073 (#2092) export types from form types
🚴‍♀️ close #1990 issue with setValue, getValues, watch and reset
🧠 improve watch API with useFieldArray delete (#2072)
🐞 fix #2112 controller re-render bug (#2115)

🐞 fix unset nested array object (#2040)
👨🏻‍💻 export ValidationRules type (#2033)
🐞 fix #2017 issue with errors not getting swap in useFieldArray (#2018)
🐞 fix #1996 trigger validation result (#2006)

🐞 fix #1963 with register type at context (#1970)
🐞 shouldUnregister will not clear error and internal form state (#1998)
🐞 fix useWatch defaultValue (#1968)
🐞 fix #1931 with reValidateMode (#1933)
👷🏻‍♂️ improve rollup config (#2001)
🎖 improve build settings (#1974)
🧜🏻‍♂️ change module name to index and remove npmignore (#1956)

⚡ feature/set value should not set dirty to true and give users option

setValue

Reason

The current API is confusing with support both name as string and array of values. In addition, programmatically set a field should give users the option to set dirty, we shouldn't set dirty to true when user setValue programmatically by default.

setValue(fieldName, values, config)

setValue('test', 'value', { shouldValidate: false, shouldDirty: false })

💈 fix/improve setError & clearError (#1907)

setError

setError will focus one error at a time and remove confusing set multiple errors, behavior change.

• setError will persis an error if it's not part of the form, which requires manual remove with clearError
• setError error will be removed by validation rules, rules always take over errors

Reason

should focus an error at a time just like the name suggested, refine the API and remove multiple errors set.

- setError('test', 'test', 'test')
+ setErrror('test', { type: 'test', message: 'bill'})

clearError

Rename to clearErrors

Reason

This function allow remove multiple errors, so make sense to rename it to clearErrors

- clearError()
+ clearErrors()

👍🏻 fix/get values (#1913)

getValues

getValues will no longer return the default value.

Reason

getValues should use to get the current form values, it doesn't make sense to get default values.

👍 improve ControllerProps type (#1872)

💈 config for auto un-register and type message to be string (#1809)

useForm({
  shouldUnregister: false // unmount input state will be remained
})

🏋️ reduce lib weight (#1806)
🐞 fix #1816 with controller methods cache (#1817)
🌚 revert useLayoutEffect (#1822)
🐞 fix #1815 bug with get default value cause dirty not set correct
🐞 fix #1843 dirty when combined with useForm and useFieldArray (#1844)
🔋 fix #1851 nested object with useWatch (#1856)
🗑 move ErrorMessage component to @hookform/error-message (#1850)

👨🏻‍💻 enable controller register rules on each render (#1791)
🐞 fix #1787 context issue with fieldArray dirty (#1792)
🐞 register controller field using useLayoutEffect (#1789)
🐛 fix ControllerProps type (#1779)
🐞 reduce useFieldArray swap render() (#1772)
🐞 fix bug around controller isSubmitted state (#1754)
🐞 fix issue with useFieldArray swap dirty value (#1759)

Features:

🎯 auto focus with useFieldArray (#1689)

append({}, autoFocus = true);
prepend({}, autoFocus = true);
insert({}, autoFocus = true);

🔋 #1580 Controller with render props API (#1711)

• Controller

Less of a breaking change for existing users, simple usage remain while still give the user the full control with render prop. Remove the following props

• onChange
• onChangeName
• onBlur
• onBlurName
• valueName

Simple usage as below, will not be impacted:

<Controller as={TextField} control={control} name="test" />

Usage involed configration and those remmoved props:

-<Controller 
-  as={CustomInput} 
-  valueName="textValue"
-  onChangeName="onTextChange"
-  control={control} 
-  name="test"  
-/>
+<Controller 
+  render={({ onChange, onBlur, value }) => (
+     <CustomInput onTextChange={onChange} onBlur={onBlur} textValue={value} />
+  )}
+  control={control} 
+  name="test"  
+/>

• ErrorMessage

change render props from children to render. you can either use as or render. for multiple error messages, you will have to use render

<ErrrorMessage errors={errors} as="p" />
<ErrrorMessage errors={errors} render={({message}) => {message}} />

Bug & Improvements:

🐞 fix watch and setValue type (#1705)
🐞 fix handleSubmit type for native multiple input (#1698)
🎯 close #1683 watch API with React Fast Refresh (#1685)
🐞 fix isValid issue with setError (#1678)
🎯 close #1619 issue around errors with useFieldArray (#1673)
🥂 clean up lib types' structure (#1670)
🐞 close #1619 when useFieldArray errors is not array (#1671)
🐞 fix dirty fields read at field array (#1668)
🐞 fix issue with isDirty when use context (#1666)
❤️ improve setValue and watch type (#1660)
🐞 fix register type to accept null argument (#1663)
🥂 improve generics naming (#1653)
🐞 fix dirtyFields type typo (#1654)
🎳 rename OnSubmit to SubmitHandler (#1708)
🐞 fix undefined ref in options (#1727)
✅ add displayName for easier dev-tools debugging (#1740)

🚨 Breaking changes

remove validationSchema and embrace validation resolver
https://github.com/react-hook-form/react-hook-form-resolvers

Reason: we would love to support all kinds of schema validation instead of just Yup, also it's not fair to carry that extra logic for users who don't use schema at all. also perhaps there are lighter options than only Yup as well.

- useForm({ validationSchema: schema })
+ useForm({ resolver: yupResolver(schema) })
+ useForm({ resolver: joiResolver(schema) })
+ useForm({ resolver: superStructResolver(schema) })

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from 'react-hook-form-resolvers';

const SignupSchema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required(),
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: yupResolver(SignupSchema), // yup, joi and even your own.
  });

  return (
    <>
      <form onSubmit={handleSubmit(d => console.log(d))}>
        <label>Test</label>
        <input name="test" ref={register} />
        <input type="submit" />
      </form>
    </>
  );
};

reanme validationResolver to resolver
reanme validationContext to context
reanme validateCriteriaMode to criteriaMode

Reason: less for the user to type, consistent with the rest of the APIs. This is a generic validation library, it makes sense to keep naming generic and validation should already be the context for this whole lib.

- validationResolver,
- validationContext,
+ resolver,
+ context,

Controller props onChange change from array arguments to object arguments

Reason: This should be the expected behavior for function's arguments.

- onChange = {([e]) => console.log(e)};
+ onChange = {(e) => console.log(e)};

triggerValidation rename to trigger

Reason: Less for a user to type and consistent with the rest of the APIs. However, if this having issue or conflict with your existing code base, you have the option to rename it in the deconstructor.

- triggerValidation();
+ trigger();

FormContext rename to FormProvider

Reason: Align name with all those big libraries such as Redux, styled-components and etc.

- <FormContext />
+ <FormProvider />

export FormContext

Reason: Some users may want to use FormContext.Consumer.

import { FormContext } from 'react-hook-form';

// in your connected component
render() {
  return (
    <FormContext.Consumer>
      {({ register, handleSubmit }) => {
        // do something with the useForm methods here
      }}
    </FormContext.Consumer>
  )
};

remove nest option for watch& getValues, so data return from both methods will be in FormValues shape.

Reason: Consistency for form values and better type support.

- getValues({ nest: true }); // { test: { data: 'test' }}
- watch({ nest: true });  // { test: { data: 'test' }}
+ getValues(); // { test: { data: 'test' }}
+ watch();  // { test: { data: 'test' }}

dirtyFields change type from set to object

Reason: consistency form state API and simplify the codebase. Reduced codebase size with object data shape.

dirty change name to isDirty

Reason: consistency form state name for boolean data.

🥃 New Features

TS: NestedValue

Reason: The field value can be array/object such as Material-UI Multiple Select and custom registered field (Custom Register).

Currently, errors object expects an array value to always be multiple fields, but it can also be a single field with an array value. To solve this, it supports NestedValue to determine if it is the field value (array/object).

import { useForm, NestedValue } from 'react-hook-form';

type FormValues = {
  key1: string;
  key2: number;
  key3: NestedValue<{
    key1: string;
    key2: number;
  }>;
  key4: NestedValue<string[]>
};

const { errors } = useForm<FormValues>();

errors?.key1?.message // no type error
errors?.key2?.message // no type error
errors?.key3?.message // no type error
errors?.key4?.message // no type error

useWatch (new) subscribe to registered inputs.

Reason: This could isolate the re-render within a particular component without trigger re-render at the form level. This is different from watch API, which will re-render at the root of useForm

<input name="test" ref={register} />

function IsolateReRender() {
  const { state } = useWatch({
    name: 'test',
    control,
    defaultValue: 'default'
  });

  return <div>{state}</div>
}

getValues() support array of field names

Reason: API Consistency with watch

+ getValues(['test', 'test1']); // { test: 'test', test1: 'test1' }

useForm({ mode: 'all' }) support all validation

Reason: so each input can validate with blur and change. https://github.com/react-hook-form/react-hook-form/issues/1222

+ useForm({ mode: 'all' })

Revert "🐞 fix #1573 yup min length validation (#1609)" (#1618)

🐞 fix IsFlatObject type for Date and FileList (#1610)