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

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

7.25.021 Jan 20222 sources agree

✨ new getFieldState API: get individual field state

✨ new getFieldState API: get individual field state

Documentation: https://react-hook-form.com/api/useform/getfieldstate

import * as React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    getFieldState,
    formState: { isDirty, isValid }
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: ""
    }
  });

  // you can invoke before render or within the render function
  const fieldState = getFieldState("firstName");

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <p>{getFieldState("firstName").isDirty && "dirty"}</p>
      <p>{getFieldState("firstName").isTouched && "touched"}</p>
      <button type="button" onClick={() => console.log(getFieldState("firstName"))}>
        field state
      </button>
    </form>
  );
}

Open source →

7.23.012 Jan 2022

💻 Feature/avoid omitting key name use field array (improve DX) (#7301) ```tsx const App = () => { const { control, register, handleSubmit } = useForm

Happy new year 2022!

💻 Feature/avoid omitting key name use field array (improve DX) (#7301)

const App = () => {
  const { control, register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      test: [{id: 'UUID5678', test: 'data' }] // id will be remained as it match default keyName
    }
  });
  const { fields, append } = useFieldArray({
    control,
    name: 'test',
  });

  return (
    <form>
      {fields.map((field, index) => {
        return <input key={field.id} {...register(`test.${index}.test`)} />;
      })}

      <button
        type={'button'}
        onClick={() => {
          append({
            id: 'UUID1234', // id value will be remained as it match default keyName
            test: '1234',
          });
        }}
      >
        append
      </button>
    </form>
  );
};

📲 apply useCallback for callback function to improve perf (#7378) 🐷 test coverage for types (#7311) 🐎 improve useFieldArray performance with separate id state (#7447) 🎩 close #6776 improve register to support shadow roots (#7400) 📇 fix type infer with UseFormHandleSubmit (#7405) 🎐 remove resolutions dep and update packages (#7396) 🎼 import type for utility 🥌 improve useFormState with mounted ref to skip update when hook is unmounted (#7489) 🪔 improve updateFieldArray batch update (#7477) 🪡 revert #6834 clearError should not affect isValid (#7470)

thanks to @daisuke85a, @MichalTarasiuk, @adrianos10, @barrymay and @felixschorer!

Open source →

Additional notes

Changed

useFieldArray change keyName is no longer required when field value contains id

const App = () => {
  const { control, register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      test: [{ id: 'UUID5678', test: 'data' }], // id value will be retained
    },
  });
  const { fields, append } = useFieldArray({
    control,
    name: 'test',
  });

  return (
    <form>
      {fields.map((field, index) => {
        return <input key={field.id} {...register(`test.${index}.test`)} />;
      })}

      <button
        type={'button'}
        onClick={() => {
          append({
            id: 'UUID1234', // id value will be retained
            test: '1234',
          });
        }}
      >
        append
      </button>
    </form>
  );
};

useFormState will no longer fire state update after hook unmount
UseFormHandleSubmit type will infer formValues

Open source →

7.23.0-next.030 Dec 2021pre-release

💻 Feature/avoid omitting key name use field array (improve DX)

💻 Feature/avoid omitting key name use field array (improve DX) (#7301)

const App = () => {
  const { control, register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      test: [{id: 'UUID5678', test: 'data' }] // id will be remained as it match default keyName
    }
  });
  const { fields, append } = useFieldArray({
    control,
    name: 'test',
  });

  return (
    <form>
      {fields.map((field, index) => {
        return <input key={field.id} {...register(`test.${index}.test`)} />;
      })}

      <button
        type={'button'}
        onClick={() => {
          append({
            id: 'UUID1234', // id value will be remained as it match default keyName
            test: '1234',
          });
        }}
      >
        append
      </button>
      <button>submit</button>
    </form>
  );
};

📲 apply useCallback for callback function to improve perf (#7378) 🐷 test coverage for types (#7311)

thanks to @felixschorer

Open source →

7.22.013 Dec 2021

🖱️ improve dx with reset API within onSubmit or combined with other

🖱️ improve dx with reset API within onSubmit or combined with other (#7274)

const onSubmit = (data) => {};

React.useEffect(() => {
  if (formState.isSubmitSuccessful) {
    reset({ something: '' });
  }
}, [formState, reset]);

handleSubmit(onSubmit);

to

const onSubmit = (data) => {
  setSubmittedData(data);
  reset(data); // no longer need to have useEffect
};

handleSubmit(onSubmit);

🐞 fix #7268 async reset API with useFieldArray (#7269) 🏛️ build(esm): Use explicit .mjs extension for ESM, with CJS interop (#7262)

huge thanks goes to @evocateur

Open source →

Additional notes

Changed

Browser native reset API will no longer be invoked when reset provided with value

const onSubmit = (data) => {};

React.useEffect(() => {
  if (formState.isSubmitSuccessful) {
    reset({ something: '' });
  }
}, [formState, reset]);

handleSubmit(onSubmit);

to

const onSubmit = (data) => {
  setSubmittedData(data);
  reset(data); // no longer need to have useEffect
};

handleSubmit(onSubmit);

Open source →

7.21.06 Dec 2021

📏 shouldUseNativeValidation will inject native validation attributes into field which supports both client & server

📏 shouldUseNativeValidation will inject native validation attributes into field which supports both client & server (#7207)

const { register } = useForm()

<input {...register('name', { required: true })} />

<input name="name" required /> // both client and server render

🤦🏻‍♂️ fix #2717 regression with async field array actions (#7218)

Open source →

Additional notes

Changed

shouldUseNativeValidation will pass down validation props both at client and server render

const { register } = useForm()

<input {...register('name', { required: true })} />

<input name="name" required /> // both client and server render

Open source →

7.20.326 Nov 2021Deprecated

…prevent update input type with files (#7147) ✂️ deprecate unset empty array function (#7120) 🐞 fix #7109 issue with field array dirty fields

👩‍👩‍👧‍👧 unify register onChange with useController retrieve value (#7153) 👍 fix setCustomValidity typo (#7154) 🔢 fix #7149 Supporting Number Object comparison in deepEqual (#7150) 🙅 prevent update input type with files (#7147) ✂️ deprecate unset empty array function (#7120) 🐞 fix #7109 issue with field array dirty fields (#7119)

thanks to @getTobiasNielsen @swapnilrohom @lxy-yz and @LucasLemanowicz

Open source →

Additional notes

Changed

register onChange will share same logic with useController for non standard event payload

const { onChange } = register('test');
onChange('stringIsValid'); // this is only valid use case for JS

empty node in formState will no longer gets unset

Open source →

7.20.019 Nov 2021

✨ feature: useWatch/useFormState exact prop (#6983) ```tsx useWatch({ name: 'test.test', exact: true, });

✨ feature: useWatch/useFormState exact prop (#6983)

useWatch({
  name: 'test.test',
  exact: true,
});

useFormState({
  name: 'test.test',
  exact: true,
});

🎳 close #7032 with stale onBlur value (#7078) 📦 upgrade to ts 4.5.2 (#6944) 👂 remove early subscription (#7056) 📦 chore: Modify package.json to include es6 imports (#7034) 🗃️ fix(package.json): add node requirement version (#7039)

thanks to @barrymay @neighborhood999 and @karanaditya993

Open source →

Additional notes

Added

new exact prop for useWatch
new exact prop for useFormState

useWatch({
  name: 'test.test',
  exact: true,
});

useFormState({
  name: 'test.test',
  exact: true,
});

Changed

useWatch subscription will occurred at useEffect instead before render

Open source →

7.19.05 Nov 2021

```tsx const { resetField } = useForm();

✨ feature: new resetField API (#6891)

const { resetField } = useForm();

resetField('test')

resetField('test', {
  keepError: true,
  keepDirty: true,
  keepTouched: true,
  defaultValue: 'test1',
})

⏱ close #6966 improve trigger by avoiding additional validation invocation (#6967)

thanks to @barrymay and @kotarella1110

Open source →

Additional notes

Added

new resetField API

const { resetField } = useForm();

resetField('test');

resetField('test', {
  keepError: true,
  keepDirty: true,
  keepTouched: true,
  defaultValue: 'test1',
});

Changed

useController will return shallow clone value for the following data type on each rerender
- object: {... value}
- array: [...value]

Open source →

7.19.0-next.030 Oct 2021pre-release

```tsx const { resetField } = useForm();

✨ new resetField API

const { resetField } = useForm();

resetField('test')

resetField('test', {
  keepError: true,
  keepDirty: true,
  keepTouched: true,
  defaultValue: 'test1',
})

🧢 close #6928 prevent schema error before user's action (#6929) 🧹remove createSubscription and createSubscriber to reduce size (#6880) ✌🏻 improve react strict mode support with subscription ✌🏻 improve useController by integrating with useWatch ✌🏻 package size-reduction (close to 1%) ✌🏻 internally removed skipEarlySubscription

Open source →

7.18.027 Oct 2021

👨‍👨‍👦 schema error parent level look up

👨‍👨‍👦 schema error parent level look up (#6869)

const validationSchema = object().shape({
  questions: array()
    .min(1, "Array cannot be empty")
    .of(
      object().shape({
        text: string().required("Some text is required")
      })
    )
});

function App() {
  const {
    control,
    formState: { errors },
    register
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(validationSchema),
    defaultValues: { questions: [ { text: 'test' } ] }
  });
  const { fields, remove } = useFieldArray({
    control,
    name: "questions",
  });
  console.log(errors);
  return (
    <form>
      {fields.map((question, questionIndex) => (
        <div key={question.key}>
          <input {...register(`questions[${questionIndex}].text`)} />

          <button type="button"
            onClick={() => {
              remove(questionIndex);
            }}
          >
            Remove
          </button>
        </div>
      ))}
    </form>
  );
}

Codesandbox LInk: works with min length parent error object look up

😞 fix #6896 validation isValid mixed with schema result (#6901) 🍨 close #6899 trigger isolate render for targeted input name (#6900) 👂 close #6889 disable early subscription with useController (#6890) 🐞 fix #6792 reset with keepDefaultValues (#6886) ℁ change the subject from class to function base to improve readability and reduce the size (#6843) 👂🏻 make sure subscriptions get unsubscribed after unmount (#6873) 🧻 prevent error lookup with fields (#6871)

Revert "Revert "✨ Add support for generic components using `FieldPat… (#6753)

type ExpectedType = { test: string };

const Generic = <FormValues extends FieldValues>({
  name,
  control,
}: {
  name: FieldPathWithValue<FormValues, ExpectedType>;
  control: Control<FormValues>;
}) => {
  const {
    field: { value, ...fieldProps },
  } = useController<FormValues, ExpectedType>({
    name,
    control,
    defaultValue: { test: 'value' },
  });

  return <input type="text" value={value.test} {...fieldProps} />;
};

😢 fix #6856 regression on set input file list (#6861) ⌨️ fix #6852 watch missing type with DeepPartial (#6854)

thanks to @kotarella1110

Open source →

Additional notes

Added

bring back FieldPathWithValue
schema errors parent object look up

const validationSchema = object().shape({
  questions: array().min(1, 'Array cannot be empty'),
});

// the above schema will be picked up by field array action
// the logic applies to group error object eg checkboxes
<button
  type="button"
  onClick={() => {
    remove(questionIndex);
  }}
>
  Remove
</button>;

Open source →

7.18.0-next.09 Oct 2021pre-release

✨ Add support for generic components using FieldPathWithValue

✨ Add support for generic components using FieldPathWithValue (#6562)

type ExpectedType = { test: string };

const Generic = <FormValues extends FieldValues>({
  name,
  control,
}: {
  name: FieldPathWithValue<FormValues, ExpectedType>;
  control: Control<FormValues>;
}) => {
  const {
    field: { value, ...fieldProps },
  } = useController<FormValues, ExpectedType>({
    name,
    control,
    defaultValue: { test: 'value' },
  });

  return <input type="text" value={value.test} {...fieldProps} />;
};

Open source →

7.17.02 Oct 2021

✨ Add support for generic components using FieldPathWithValue

✨ Add support for generic components using FieldPathWithValue (#6562)

type ExpectedType = { test: string };

const Generic = <FormValues extends FieldValues>({
  name,
  control,
}: {
  name: FieldPathWithValue<FormValues, ExpectedType>;
  control: Control<FormValues>;
}) => {
  const {
    field: { value, ...fieldProps },
  } = useController<FormValues, ExpectedType>({
    name,
    control,
    defaultValue: { test: 'value' },
  });

  return <input type="text" value={value.test} {...fieldProps} />;
};

⚙️ migrate from Select.options to Select.selectedOptions (#6678) (#6687) 🐞 fix #6683 trigger regression with isValid subscription (#6686)

Thanks to @julienfouilhe and @krnlde

Open source →

Additional notes

Added

new type FieldPathWithValue to improve generic components type support

type ExpectedType = { test: string };

const Generic = <FormValues extends FieldValues>({
  name,
  control,
}: {
  name: FieldPathWithValue<FormValues, ExpectedType>;
  control: Control<FormValues>;
}) => {
  const {
    field: { value, ...fieldProps },
  } = useController<FormValues, ExpectedType>({
    name,
    control,
    defaultValue: { test: 'value' },
  });

  return <input type="text" value={value.test} {...fieldProps} />;
};

Open source →

7.16.024 Sept 2021

🪄 feat: Ability to provide custom onBlur and onChange handlers

🪄 feat: Ability to provide custom onBlur and onChange handlers (#5620)

<input
  type="text"
  {...register('test', {
    onChange: (e) => {},
    onBlur: (e) => {},
  })}
/>

🗺️ fix Mapped types for defined value type with interface (#6605) 🏥 close #6590 prevent error throw by missing input with trigger API (#6591)

Thanks to @kotarella1110 @exneval @michalbundyra

Open source →

Additional notes

Added

register allowed pass custom onChange and onBlur

<input
  type="text"
  {...register('test', {
    onChange: (e) => {},
    onBlur: (e) => {},
  })}
/>

Open source →

7.15.05 Sept 2021

🎇 [useFieldArray] new method replace()

🎇 [useFieldArray] new method replace() (#6304)

const { control } = useForm({
  defaultValues: {
    test: [{ value: 'lorem' }, { value: 'ipsum' }]
  }
});
const { fields, replace } = useFieldArray({ 
  control, 
  name: 'test'
});

const handleFullyReplacement = (): void => {
  // remove old and set fully new values
  replace([{ value: 'dolor' }, { value: 'sit' }, { value: 'amet' }]);
}

🐞 fix #6379 toggle disabled props with register api (#6459) 🗺️ improve Mapped types (#6451) 🗝️ refactor: improve NestedValue type (#6449) 🗝️ feat: improve PathValue type to fully support union type (#6431)

Open source →

Additional notes

Added

useFieldArray new method replace()

const { control } = useForm({
  defaultValues: {
    test: [{ value: 'lorem' }, { value: 'ipsum' }],
  },
});
const { fields, replace } = useFieldArray({
  control,
  name: 'test',
});

const handleFullyReplacement = (): void => {
  // remove old and set fully new values
  replace([{ value: 'dolor' }, { value: 'sit' }, { value: 'amet' }]);
};

Improved to not map types defined with interface.

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

interface CustomValue {
  custom: string;
}

type FormValues = {
  fieldName: CustomValue;
};

const { formState: errors } = useForm<FormValues>({
  defaultValues: { fieldName: { custom: 'value' } },
});

Open source →

7.14.027 Aug 2021

🥳 feature: add dependent validation - run a dependent field's validation after another field's validation runs

🥳 feature: add dependent validation - run a dependent field's validation after another field's validation runs (#6141)

const App = () => {
  const { register, getValues } = useForm();

  return (
    <form>
      <input
        {...register('firstName', {
          validate: (value) => {
            return getValues('lastName') === value;
          }
        })}
      />
      <input {...register('lastName', { deps: ['firstName'] })} /> // dependant validation
    </form>
  );
};

🦆 close #6319 remove shallow clone with watch return value (#6336) 🗝️ fix #6320 type issue with provider context (#6326) 🎛️ fix #6335 useController only update field ref #6341 🎮 close #6328 useController set defaultValue to be part of formValues (#6329) 📭 close #6367 missing absent empty object and array input from defaultValues (#6368)

Open source →

Additional notes

Added

register add dependent validation

const App = () => {
  const { register, getValues } = useForm();

  return (
    <form>
      <input
        {...register('firstName', {
          validate: (value) => {
            return getValues('lastName') === value;
          },
        })}
      />
      <input {...register('lastName', { deps: ['firstName'] })} /> // dependant
      validation
    </form>
  );
};

Open source →

7.14.0-next.025 Aug 2021pre-release

🥳 feature: add dependent validation - run a dependent field's validation after another field's validation runs

🥳 feature: add dependent validation - run a dependent field's validation after another field's validation runs (#6141)

const App = () => {
  const { register, getValues } = useForm();

  return (
    <form>
      <input
        {...register('firstName', {
          validate: (value) => {
            return getValues('lastName') === value;
          }
        })}
      />
      <input {...register('lastName', { deps: ['firstName'] })} /> // dependant validation
    </form>
  );
};

🦆 close #6319 remove shallow clone with watch return value (#6336) 🗝️ fix #6320 type issue with provider context (#6326) 🎛️ fix #6335 useController only update field ref #6341 🎮 close #6328 useController set defaultValue to be part of formValues (#6329)

Open source →

7.13.022 Aug 20212 sources agree

🏎 Performance enhancement at scale

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

Open source →