<FastField />

始める前に

<FastField />はパフォーマンスの最適化を目的としています。しかし、本当に必要になるまで使用する必要はありません。ReactのshouldComponentUpdate()の動作に精通している場合のみ、続行してください。警告しておきます。

いいえ、真剣に。続行する前に、公式Reactドキュメントの以下の部分を確認してください。

概要

<FastField />は、大規模なフォーム（約30個以上のフィールド）またはフィールドに非常にコストのかかるバリデーション要件がある場合に使用することを目的とした、<Field />の最適化されたバージョンです。<FastField />は<Field>とまったく同じAPIを持っていますが、shouldComponentUpdate()を内部的に実装して、<FastField />の関連部分/Formik状態のスライスへの直接的な更新がない限り、追加のレンダリングをすべてブロックします。

たとえば、<FastField name="firstName" />は、次の場合にのみ再レンダリングされます。

values.firstName、errors.firstName、touched.firstName、またはisSubmittingへの変更。これは浅い比較によって決定されます。注：ドットパスがサポートされています。
プロップが<FastField name="firstName" />に追加または削除された場合
nameプロップが変更された場合

これらの状況以外では、Formik状態の他の部分が変更されても、<FastField />は再レンダリングされません。ただし、<FastField />によってトリガーされるすべての更新は、他の「標準」<Field />コンポーネントへの再レンダリングをトリガーします。

`<FastField />`を使用する場合

<Field />がフォーム内の他のすべての<Field />から「独立」している場合、<FastField />を使用できます。.

より具体的には、<Field />が、他の<Field />または<FastField />のFormik状態のスライスへの更新に基づいて動作を変更したり、何かをレンダリングしたりせず、最上位の<Formik />状態（例：isValidating、submitCount）の他の部分に依存しない場合、<FastField />を<Field />のドロップイン置換として使用できます。

例

1 import React from 'react';
2 import { Formik, Field, FastField, Form } from 'formik';
3 import * as Yup from 'yup';
4 
5 const Basic = () => (
6   <div>
7     <h1>Sign Up</h1>
8     <Formik
9       initialValues={{
10         firstName: '',
11         lastName: '',
12         email: '',
13       }}
14       validationSchema={Yup.object().shape({
15         firstName: Yup.string().required(),
16         middleInitial: Yup.string(),
17         lastName: Yup.string().required(),
18         email: Yup.string().email().required(),
19       })}
20       onSubmit={values => {
21         setTimeout(() => {
22           alert(JSON.stringify(values, null, 2));
23         }, 500);
24       }}
25     >
26       {formikProps => (
27         <Form>
28           {/** This <FastField> only updates for changes made to
29            values.firstName, touched.firstName, errors.firstName */}
30           <label htmlFor="firstName">First Name</label>
31           <FastField name="firstName" placeholder="Weezy" />
32 
33           {/** Updates for all changes because it's from the
34            top-level formikProps which get all updates */}
35           {formikProps.touched.firstName && formikProps.errors.firstName && (
36             <div>{formikProps.errors.firstName}</div>
37           )}
38 
39           <label htmlFor="middleInitial">Middle Initial</label>
40           <FastField name="middleInitial" placeholder="F">
41             {({ field, form, meta }) => (
42               <div>
43                 <input {...field} />
44                 {/**
45                  * This updates normally because it's from the same slice of Formik state,
46                  * i.e. path to the object matches the name of this <FastField />
47                  */}
48                 {meta.touched ? meta.error : null}
49 
50                 {/** This won't ever update since it's coming from
51                  from another <Field>/<FastField>'s (i.e. firstName's) slice   */}
52                 {form.touched.firstName && form.errors.firstName
53                   ? form.errors.firstName
54                   : null}
55 
56                 {/* This doesn't update either */}
57                 {form.submitCount}
58 
59                 {/* Imperative methods still work as expected */}
60                 <button
61                   type="button"
62                   onClick={form.setFieldValue('middleInitial', 'J')}
63                 >
64                   J
65                 </button>
66               </div>
67             )}
68           </FastField>
69 
70           {/** Updates for all changes to Formik state
71            and all changes by all <Field>s and <FastField>s */}
72           <label htmlFor="lastName">LastName</label>
73           <Field name="lastName" placeholder="Baby">
74             {({ field, form, meta }) => (
75               <div>
76                 <input {...field} />
77                 {/**  Works because this is inside
78                  of a <Field/>, which gets all updates */}
79                 {form.touched.firstName && form.errors.firstName
80                   ? form.errors.firstName
81                   : null}
82               </div>
83             )}
84           </Field>
85 
86           {/** Updates for all changes to Formik state and
87            all changes by all <Field>s and <FastField>s */}
88           <label htmlFor="email">Email</label>
89           <Field name="email" placeholder="jane@acme.com" type="email" />
90 
91           <button type="submit">Submit</button>
92         </Form>
93       )}
94     </Formik>
95   </div>
96 );