createFormControl | React Hook Form

Since v7.55.0

This function creates the entire form state subscription and allows you to subscribe to updates with or without a React component. You can use this function without needing the React Context API.

Props

Name	Type	Description
`...props`	Object	`UseFormProps`

Returns

Name	Type	Description
`formControl`	Object	control object for `useForm` hook
`control`	Object	control object for `useController`, `useFormState`, `useWatch`
`subscribe`	Function	function to subscribe for form state updates without rendering
`...returns`	Functions	`useForm` return methods

NOTES

This function is completely optional; you can consider using this instead of the useFormContext API. - You may find it useful if you would like to subscribe to formState while skipping React re-renders.

RULES

You should either use this API or the Context API

const props = createFormControl()

<FormProvider {...props} /> // ❌ You don't need a provider

<input {...props.register('name')} /> // ✅ Use method directly from createFormControl

Examples:

const { formControl, control, handleSubmit, register } = createFormControl({
  mode: "onChange",
  defaultValues: {
    firstName: "Bill",
  },
})

function App() {
  useForm({
    formControl,
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register("name")} />
      <FormState />
      <ControlledInput />
    </form>
  )
}

function FormState() {
  const { isDirty } = useFormState({
    control, // no longer need context api
  })

  return isDirty ? <p>Form is dirty.</p> : null
}

function ControlledInput() {
  const { field } = useController({
    control, // no longer need context api
    name: "firstName",
  })

  return <input {...field} />
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider starring and supporting it.