Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 07e4112

Browse files
immitsubluebill1049
andauthored
cleanup snippets in advanced-usage (react-hook-form#1112)
Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>
1 parent a403395 commit 07e4112

File tree

1 file changed

+23
-39
lines changed

1 file changed

+23
-39
lines changed

β€Žsrc/content/advanced-usage.mdx

Lines changed: 23 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ React Hook Form has support for native form validation, which lets you validate
1111
The following code example works as intended for validation; however, it can be improved for accessibility.
1212

1313
```javascript copy
14-
import React from "react"
1514
import { useForm } from "react-hook-form"
1615

1716
export default function App() {
@@ -190,7 +189,7 @@ Let's have a look what's in each of these components.
190189
The `Form` component's responsibility is to inject all `react-hook-form` methods into the child component.
191190

192191
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-smart-form-component-forked-iq89z"
193-
import React from "react"
192+
import { Children, createElement } from "react"
194193
import { useForm } from "react-hook-form"
195194

196195
export default function Form({ defaultValues, children, onSubmit }) {
@@ -199,9 +198,9 @@ export default function Form({ defaultValues, children, onSubmit }) {
199198

200199
return (
201200
<form onSubmit={handleSubmit(onSubmit)}>
202-
{React.Children.map(children, (child) => {
201+
{Children.map(children, (child) => {
203202
return child.props.name
204-
? React.createElement(child.type, {
203+
? createElement(child.type, {
205204
...{
206205
...child.props,
207206
register: methods.register,
@@ -220,8 +219,6 @@ export default function Form({ defaultValues, children, onSubmit }) {
220219
Those input components' responsibility is to register them into `react-hook-form`.
221220

222221
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-smart-form-component-forked-iq89z"
223-
import React from "react"
224-
225222
export function Input({ register, name, ...rest }) {
226223
return <input {...register(name)} {...rest} />
227224
}
@@ -277,7 +274,7 @@ import { FormProvider, useForm, useFormContext } from "react-hook-form"
277274
export const ConnectForm = ({ children }) => {
278275
const methods = useFormContext()
279276

280-
return children({ ...methods })
277+
return children(methods)
281278
}
282279

283280
export const DeepNest = () => (
@@ -308,7 +305,7 @@ React Hook Form's [FormProvider](/docs/formprovider) is built upon [React's Cont
308305
**Note:** Using React Hook Form's [Devtools](/dev-tools) alongside [FormProvider](/docs/formprovider) can cause performance issues in some situations. Before diving deep in performance optimizations, consider this bottleneck first.
309306

310307
```javascript copy sandbox="https://codesandbox.io/s/provider-perf-forked-r24ho"
311-
import React, { memo } from "react"
308+
import { memo } from "react"
312309
import { useForm, FormProvider, useFormContext } from "react-hook-form"
313310

314311
// we can use React.memo to prevent re-render except isDirty state changed
@@ -354,7 +351,6 @@ React Hook Form embraces uncontrolled components but is also compatible with con
354351
<TabGroup buttonLabels={["Controller", "Custom Register"]}>
355352

356353
```javascript copy
357-
import React, { useEffect } from "react"
358354
import { Input, Select, MenuItem } from "@material-ui/core"
359355
import { useForm, Controller } from "react-hook-form"
360356

@@ -364,7 +360,7 @@ const defaultValues = {
364360
}
365361

366362
function App() {
367-
const { handleSubmit, reset, watch, control, register } = useForm({
363+
const { handleSubmit, reset, control, register } = useForm({
368364
defaultValues,
369365
})
370366
const onSubmit = (data) => console.log(data)
@@ -395,7 +391,7 @@ function App() {
395391
```
396392

397393
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-controlled-mixed-with-uncontrolled-forked-c323j"
398-
import React, { useEffect } from "react"
394+
import { useEffect } from "react"
399395
import { Input, Select, MenuItem } from "@material-ui/core"
400396
import { useForm } from "react-hook-form"
401397

@@ -447,7 +443,7 @@ You can build a custom hook as a resolver. A custom hook can easily integrate wi
447443
- Pass the validation resolver to the useForm hook
448444

449445
```javascript copy sandbox="https://codesandbox.io/s/custom-hook-with-resolver-v7-cwczk"
450-
import React, { useCallback, useMemo } from "react"
446+
import { useCallback } from "react"
451447
import { useForm } from "react-hook-form"
452448
import * as yup from "yup"
453449

@@ -512,31 +508,29 @@ An example is shown below using [react-window](https://github.com/bvaughn/react-
512508
<TabGroup buttonLabels={["Form", "Field Array"]}>
513509
514510
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-with-react-window-forked-3j3mq"
515-
import React from "react"
511+
import { memo } from "react"
516512
import { FormProvider, useForm, useFormContext } from "react-hook-form"
517513
import { VariableSizeList as List } from "react-window"
518514
import AutoSizer from "react-virtualized-auto-sizer"
519-
import ReactDOM from "react-dom"
520-
import "./styles.css"
521515

522516
const items = Array.from(Array(1000).keys()).map((i) => ({
523517
title: `List ${i}`,
524518
quantity: Math.floor(Math.random() * 10),
525519
}))
526520

527-
const WindowedRow = React.memo(({ index, style, data }) => {
521+
const WindowedRow = memo(({ index, style, data }) => {
528522
const { register } = useFormContext()
529523

530524
return <input {...register(`${index}.quantity`)} />
531525
})
532526

533527
export const App = () => {
534528
const onSubmit = (data) => console.log(data)
535-
const formMethods = useForm({ defaultValues: items })
529+
const methods = useForm({ defaultValues: items })
536530

537531
return (
538-
<form className="form"onSubmit={formMethods.handleSubmit(onSubmit)}>
539-
<FormProvider {...formMethods}>
532+
<form onSubmit={methods.handleSubmit(onSubmit)}>
533+
<FormProvider {...methods}>
540534
<AutoSizer>
541535
{({ height, width }) => (
542536
<List
@@ -572,7 +566,7 @@ function App() {
572566
test: items,
573567
},
574568
})
575-
const { fields, remove } = useFieldArray({ control, name: "test" })
569+
const { fields } = useFieldArray({ control, name: "test" })
576570

577571
return (
578572
<FixedSizeList
@@ -652,7 +646,6 @@ Additionally, you can set up [eslint-plugin-testing-library](https://github.com/
652646
We have set the role attribute accordingly. These attributes are helpful for when you write tests, and they improve accessibility. For more information, you can refer to the [testing-library](https://testing-library.com/) documentation.
653647
654648
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk?file=/src/App.js"
655-
import React from "react"
656649
import { useForm } from "react-hook-form"
657650

658651
export default function App({ login }) {
@@ -716,7 +709,6 @@ The following criteria are what we try to cover with the tests:
716709
- Test successful submission.
717710
718711
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk?file=/src/App.test.js"
719-
import React from "react"
720712
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
721713
import App from "./App"
722714

@@ -812,11 +804,10 @@ If you test a component that uses react-hook-form, you might run into a warning
812804
> Warning: An update to MyComponent inside a test was not wrapped in act(...)
813805
814806
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-yq7uj?file=/src/App.js"
815-
import React from "react"
816807
import { useForm } from "react-hook-form"
817808

818809
export default function App() {
819-
const { register, handleSubmit, formState } = useForm({
810+
const { register, handleSubmit } = useForm({
820811
mode: "onChange",
821812
})
822813
const onSubmit = (data) => {}
@@ -835,7 +826,6 @@ export default function App() {
835826
```
836827
837828
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-yq7uj?file=/src/App.test.js"
838-
import React from "react"
839829
import { render, screen } from "@testing-library/react"
840830
import App from "./App"
841831

@@ -853,7 +843,6 @@ This is because react-hook-form internally uses asynchronous validation handlers
853843
To solve this, wait until some element from your UI appears with `find*` queries. Note that you **must not** wrap your `render()` calls in `act()`. [You can read more about wrapping things in `act` unnecessarily here](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#wrapping-things-in-act-unnecessarily).
854844
855845
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-unit-test-act-warning-docs-tcb7y?file=/src/App.test.js"
856-
import React from "react"
857846
import { render, screen } from "@testing-library/react"
858847
import App from "./App"
859848

@@ -875,13 +864,9 @@ it("should have a submit button", async () => {
875864
The native input returns the value in `string` format unless invoked with `valueAsNumber` or `valueAsDate`, you can read more under [this section](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). However, it's not perfect. We still have to deal with `isNaN` or `null` values. So it's better to leave the transform at the custom hook level. In the following example, we are using the `Controller` to include the functionality of the transform value's input and output. You can also achieve a similar result with a custom `register`.
876865
877866
```javascript copy sandbox="https://codesandbox.io/s/transform-vt3tm"
867+
import { Controller } from "react-hook-form"
878868

879-
const ControllerPlus = ({
880-
control,
881-
transform,
882-
name,
883-
defaultValue
884-
}) => (
869+
const ControllerPlus = ({ control, transform, name, defaultValue }) => (
885870
<Controller
886871
defaultValue={defaultValue}
887872
control={control}
@@ -893,17 +878,16 @@ const ControllerPlus = ({
893878
/>
894879
)}
895880
/>
896-
);
881+
)
897882

898883
// usage below:
899-
<ControllerPlus<string, number>
884+
<ControllerPlus
900885
transform={{
901-
input: (value) =>
902-
isNaN(value) || value === 0 ? "" : value.toString(),
886+
input: (value) => (isNaN(value) || value === 0 ? "" : value.toString()),
903887
output: (e) => {
904-
const output = parseInt(e.target.value, 10);
905-
return isNaN(output) ? 0 : output;
906-
}
888+
const output = parseInt(e.target.value, 10)
889+
return isNaN(output) ? 0 : output
890+
},
907891
}}
908892
control={control}
909893
name="number"

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /