react-hook-form

🏋🏻 improve build dist package size (https://github.com/react-hook-form/react-hook-form/pull/8511)
🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8506 delayError not overwrite existing function call (https://github.com/react-hook-form/react-hook-form/pull/8509)
📖 update the use of validadtionSchema in v7 examples (https://github.com/react-hook-form/react-hook-form/pull/8501)

thanks, @bryantobing12

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8493 error not trigger with delayError (https://github.com/react-hook-form/react-hook-form/pull/8494)
🔍 fix null or undefined cases caught by TS ^4.8 (https://github.com/react-hook-form/react-hook-form/pull/8487)
🥸 funnel along with appropriate constraints for (upcoming) TypeScript 4.8 (https://github.com/react-hook-form/react-hook-form/pull/8484)

thanks to @DanielRosenwasser

🎠 feat: make UseFormRegisterReturn generic over TFieldName (https://github.com/react-hook-form/react-hook-form/pull/8414)
🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8459 regression issue with draft state object (https://github.com/react-hook-form/react-hook-form/pull/8463)
🧾 fix: doc watch() with callback example must deconstruct the returned type (https://github.com/react-hook-form/react-hook-form/pull/8451)
🤝 fix: compare html elements against correct global (https://github.com/react-hook-form/react-hook-form/pull/8355)
🐞 flush errors state update when user switch input with delayError (#8429)

thanks to @omjadas @Pika-Pool and @zenoamaro

🧑‍💻 Support TypeScript 4.7+ ESM (https://github.com/react-hook-form/react-hook-form/pull/8390)
🧾 Fix typo (https://github.com/react-hook-form/react-hook-form/pull/8389)
ℹ️ fix export types order
🪝 upgrade to TS 4.7 (https://github.com/react-hook-form/react-hook-form/pull/8402)
🕸 close https://github.com/react-hook-form/react-hook-form/issues/8404 use isWeb instead of globalThis (https://github.com/react-hook-form/react-hook-form/pull/8406)
🥬 save cloneObject bytes (https://github.com/react-hook-form/react-hook-form/pull/8407)

thanks to @davbrito, @rossng, @hwanyoungChoi and @Moshyfawn

🐞 fix(reset): set isSubmitted to formState value if keepIsSubmitted is true (https://github.com/react-hook-form/react-hook-form/pull/8368)

thanks to @blabute

🎭 close #7472 include a proxy check with field state to improve useController perf (#8334)
🐞 fix #8339 Revert "🗑 remove the reference for blob and file list (https://github.com/react-hook-form/react-hook-form/pull/8305)"
🚮 remove dead code (#8337)

thanks to @NMinhNguyen

🚀 reset optional prop: keepDirtyValues (https://github.com/react-hook-form/react-hook-form/pull/8237)

reset(
  {
    firstName: "bill", // if firstName is dirty then the value will be retained
    lastName: "luo"
  },
  { keepDirtyValues: true } // keep any changed field
);

👩‍🔧 close https://github.com/react-hook-form/react-hook-form/issues/8324 auto-correct field array errors on user action (https://github.com/react-hook-form/react-hook-form/pull/8325)

const { append } = useFieldArray()

append({ data: '' }) // will auto correct existing field array errors if any

🐞 fix: clone objects which have functions (https://github.com/react-hook-form/react-hook-form/pull/8301)
📖 fix name of a new option in 6.12.0 change-log notes (https://github.com/react-hook-form/react-hook-form/pull/8335)

thanks to @Moshyfawn @airman5573 @TkDodo and @MasterOdin

Notes

🐣 determine checkbox group by defaultValues set as array value (https://github.com/react-hook-form/react-hook-form/pull/7938)

useForm({
  defaultValues: {
    checkboxes: [], // register checkbox will be determine as array of checkboxes
  },
});
register('checkboxes'); // will return array as value

🧪 improve test cases with checkbox default value as array (https://github.com/react-hook-form/react-hook-form/pull/7501)
📕 add fieldState invalid depreciation note (https://github.com/react-hook-form/react-hook-form/pull/8202)
⛑ improve getNodeParentName missing case(s) (https://github.com/react-hook-form/react-hook-form/pull/8181)
🔨 support field array parents with numbers in name (https://github.com/react-hook-form/react-hook-form/pull/8167)
💉 improve lib tests cases (https://github.com/react-hook-form/react-hook-form/pull/8155)

Contributors

Thanks to contributors below ❤️

• @spacenate
• @tedliang
• @Moshyfawn
• @jgullstr
• @romain-trotard

❤️ update react 18 peer dep
📦 es2017 to es2018 (https://github.com/react-hook-form/react-hook-form/pull/8066) Reduce 1% of package weight
🏃 avoid runtime error with compact (https://github.com/react-hook-form/react-hook-form/pull/8094)
👋 goodbye omit (https://github.com/react-hook-form/react-hook-form/pull/8079)
🐞 close https://github.com/react-hook-form/react-hook-form/issues/8071 issue on shouldUnreigster mutate defaultValues (https://github.com/react-hook-form/react-hook-form/pull/8078)
⏭️ close https://github.com/react-hook-form/react-hook-form/issues/8076 isMount flag issue with useEffect running twice with react 18 (https://github.com/react-hook-form/react-hook-form/pull/8077)
🎧 close https://github.com/react-hook-form/react-hook-form/issues/8071 clean up at useForm useEffect (https://github.com/react-hook-form/react-hook-form/pull/8073)

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8050 disabled attribute ignored with register checkbox (https://github.com/react-hook-form/react-hook-form/pull/8053)
📦 update package.json to set sideEffect false (https://github.com/react-hook-form/react-hook-form/pull/8041)
🆙 TS 4.6.0 (https://github.com/react-hook-form/react-hook-form/pull/7623)
📖 fix replace API TSDoc for fieldArray

thanks to @alexogar and @Moshyfawn

🏬 enable deps with string syntax (https://github.com/react-hook-form/react-hook-form/pull/7901)

register('test', { deps: 'theOtherInput' })
register('test', { deps: ['theOtherInput', 'others'] })

🧷 fix field array update to avoid external mutation
🐞 fix https://github.com/react-hook-form/react-hook-form/issues/7960 issue on unset deeply nested array field (https://github.com/react-hook-form/react-hook-form/pull/7961)
🐞 fix https://github.com/react-hook-form/react-hook-form/issues/7958 issue with checkbox plus portal (https://github.com/react-hook-form/react-hook-form/pull/7959)
📦 unpack blob data type (https://github.com/react-hook-form/react-hook-form/pull/7937)

thanks to @DASPRiD and @Moshyfawn

🏬 enable deps with string syntax (https://github.com/react-hook-form/react-hook-form/pull/7901)

register('test', { deps: 'theOtherInput' })

🧷 fix field array update to avoid external mutation

🐛 fix https://github.com/react-hook-form/react-hook-form/issues/7853 (useFieldArray): pass context type down to Control (https://github.com/react-hook-form/react-hook-form/pull/7856)
🐞 fix https://github.com/react-hook-form/react-hook-form/issues/7849 issue with unset on multiple dimension array (https://github.com/react-hook-form/react-hook-form/pull/7859)

thanks to @Moshyfawn

✨ https://github.com/react-hook-form/react-hook-form/issues/7138 feature: allow selecting input's content on focus (https://github.com/react-hook-form/react-hook-form/pull/7781)

setFocus('fieldName', { shouldSelect: true })

https://user-images.githubusercontent.com/10513364/153570934-ca29337f-d7ce-4744-b282-6939c2e17b48.mp4

⌨️ fix https://github.com/react-hook-form/react-hook-form/issues/7772 type issue by using UnpackNestedValue on FieldArray methods (https://github.com/react-hook-form/react-hook-form/pull/7773)

thanks to @Moshyfawn and @hpersson

🐞 close https://github.com/react-hook-form/react-hook-form/issues/7758 useController should subscribe to exact field name (https://github.com/react-hook-form/react-hook-form/pull/7759)

thanks to @Moshyfawn

📚 TSDoc

https://user-images.githubusercontent.com/10513364/152477495-7df7269c-18c2-4420-85e7-956c7c35ca42.mp4

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/7741 is validating reset when async validations are still running (https://github.com/react-hook-form/react-hook-form/pull/7747)
⛑ close https://github.com/react-hook-form/react-hook-form/issues/7717 shallow clone errors object in handleSubmit (https://github.com/react-hook-form/react-hook-form/pull/7718)
🍦 close https://github.com/react-hook-form/react-hook-form/issues/7703 don't expose internal state in handleSubmit (https://github.com/react-hook-form/react-hook-form/pull/7704)
🏋️ save bytes on parseFloat (https://github.com/react-hook-form/react-hook-form/pull/7697)

thanks to @Moshyfawn and @tiii

😭 close #7686 regression on replace API and cloneObject on payload (#7687)

⚛️ close #7683 support preact with onTouched mode (#7684)

thanks to @Moshyfawn

🐞 fix #7662 issue with reset file input (#7656)
🚗 improve perf with get proxy formState (#7655)
🏋️ remove redundant check (#7651)
🐞 fix #7648 Unable to setFocus to Controller after reset (#7649)
🐞 fix: getFieldState - error might be undefined (#7636)
⛑ improve useFieldArray code consistency (#7628)

thanks to @Moshyfawn and @michalbundyra

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