Skip to content

docs: Fix documentation errors in FAQ page #1176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 29, 2025
Merged

docs: Fix documentation errors in FAQ page #1176

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 4 additions & 12 deletions src/content/faqs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,12 +168,11 @@ export default function App() {
const onSubmit = (data) => console.log(data)
const { ref, ...rest } = register("firstName")
const onClick = () => {
firstNameRef.current!.value = ""
firstNameRef.current.value = ""
}

useImperativeHandle(ref, () => firstNameRef.current)


return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...rest} ref={firstNameRef} />
Expand Down Expand Up @@ -207,7 +206,7 @@ export default function App() {
useEffect(() => {
register("firstName", { required: true })
register("lastName")
}, [])
}, [register])

return (
<form onSubmit={handleSubmit(onSubmit)}>
Expand Down Expand Up @@ -240,18 +239,11 @@ Make sure you are not using `value`. The correct property is `defaultValue`.

React Hook Form is focusing on uncontrolled inputs, which means you don't need to change the input `value` via `state` via `onChange`. In fact, you don't need `value` at all. You only need to set `defaultValue` for the initial input value.

```javascript
import { useForm } from "react-hook-form/dist/index.ie11" // V6
import { useForm } from "react-hook-form/dist/react-hook-form.ie11" // V5'
// Resolvers
import { yupResolver } from "@hookform/resolvers/dist/ie11/yup"
```

---

## React Hook Form, Formik or Redux Form? {#ReactHookFormFormikorReduxForm}

First of all, all libs try to solve the same problem: make the form building experience as easy as possible. However, there are some fundamental differences between these three. `react-hook-form` is built with uncontrolled inputs in mind and tries to provide your form with the best performance and least amount of re-renders possible. Additionallly, `react-hook-form` is built with React Hooks and used as a hook, which means there is no Component for you to import. Here are some of the detailed differences:
First of all, all libs try to solve the same problem: make the form building experience as easy as possible. However, there are some fundamental differences between these three. `react-hook-form` is built with uncontrolled inputs in mind and tries to provide your form with the best performance and least amount of re-renders possible. Additionally, `react-hook-form` is built with React Hooks and used as a hook, which means there is no Component for you to import. Here are some of the detailed differences:

| | React Hook Form | Formik | Redux Form |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -303,7 +295,7 @@ It's important to understand that React Hook Form embraces native form behavior
- [Modal form and toggle inputs example](https://codesandbox.io/s/react-hook-form-modal-form-conditional-inputs-c7n0r)
- [Tab form example](https://codesandbox.io/s/tabs-760h9)

Alternatively you can use the deprecated option `shouldUnregister: false` when calling \`useForm\`.
Alternatively you can use the deprecated option `shouldUnregister: false` when calling `useForm`.

<TabGroup buttonLabels={["Controller", "Custom Register"]}>

Expand Down