useFormik()

useFormik() は、すべてのFormikの状態とヘルパーを直接返すカスタムReactフックです。その名前にもかかわらず、ほとんどのユースケースには適していません。内部的には、FormikはuseFormikを使用して<Formik>コンポーネント（Reactコンテキストプロバイダーをレンダリングする）を作成します。コンテキストを介してFormikの状態にアクセスしようとしている場合は、useFormikContextを使用してください。 <Formik>またはwithFormikを使用していない場合にのみ、このフックを使用してください。

**<Field>、<FastField>、<ErrorMessage>、connect()、および<FieldArray>は、すべてReactコンテキストを必要とするため、useFormik()では機能しないことに注意してください。

`useFormik()`のユースケース

あなたはJaredです
戻り値を変更し、独自の消費のために変更されたバージョンの<Formik>を作成しています
Reactコンテキストの使用を避けたい（おそらくパフォーマンス上の理由から）

例

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   const formik = useFormik({
6     initialValues: {
7       firstName: '',
8       lastName: '',
9       email: '',
10     },
11     onSubmit: values => {
12       alert(JSON.stringify(values, null, 2));
13     },
14   });
15   return (
16     <form onSubmit={formik.handleSubmit}>
17       <label htmlFor="firstName">First Name</label>
18       <input
19         id="firstName"
20         name="firstName"
21         type="text"
22         onChange={formik.handleChange}
23         value={formik.values.firstName}
24       />
25       <label htmlFor="lastName">Last Name</label>
26       <input
27         id="lastName"
28         name="lastName"
29         type="text"
30         onChange={formik.handleChange}
31         value={formik.values.lastName}
32       />
33       <label htmlFor="email">Email Address</label>
34       <input
35         id="email"
36         name="email"
37         type="email"
38         onChange={formik.handleChange}
39         value={formik.values.email}
40       />
41       <button type="submit">Submit</button>
42     </form>
43   );
44 };