React Hook Form 入門

OPENLOGIの細川です。[2017年のアドベントカレンダー](https://qiita.com/yhosok/items/ab8e990403749690d846)の記事でも書きましたが、弊社システムのフロント実装ではRedux Formを使用しています。

あるとき [Redux Form の Github ページ](https://github.com/redux-form) を見たところ、[このような](https://github.com/redux-form/redux-form/blob/master/README.md#%EF%B8%8F-attention-%EF%B8%8F)記載がありました。

> If you're just getting started with your application and are looking for a form solution, the [general consensus of the community](https://twitter.com/acemarke/status/1124771065115185152) is that you should _not_ put your form state in Redux. 

form値をreduxの管理下に置くのは原則よろしくないということで、今後はRedux Formでないものを使わねばならないようです。

そこでRedux Formの作者が提示しているのが、[React Final Form](https://github.com/final-form/react-final-form#-react-final-form)というもので、これはコア部分が[Final Form](https://github.com/final-form/final-form#-final-form)という、フレームワーク依存の無いform情報管理ライブラリが使用されてまして、そのReactラッパー版になります。もちろんFinal Formだけでも利用が可能です。

軽く使った感じではRedux Formからの移行は非常にやりやすそうではありましたが、結構以前からあるライブラリなので、他の似たものとの比較記事など眺めていたところ、[React Hook Form](https://react-hook-form.com/)というのが目に止まりました。

これはReact16.8.0から導入されたhooksの仕組みを利用したformライブラリということで、とても使いやすそうだったので少し触ってみることにしました。

直近の自分の課題としては、Redux Formで実装されたものと比較してどの程度楽になるのか？ということですから、[2017年のアドベントカレンダーの記事](https://qiita.com/yhosok/items/ab8e990403749690d846)と同じものを作って比較してみたいと思います。

## 環境

まずは [create-react-app](https://github.com/facebookincubator/create-react-app) 使って簡易にreactの環境を作ります

```
npx create-react-app my-react-hook-form
cd my-react-hook-form
npm start
```

ブラウザでデフォルトの画面が立ち上がるかと思います。

この状態では react-hook-form は入ってませんのでインストールします。画面の体裁のために [react-bootstrap](https://react-bootstrap.github.io/) も入れておきます。

```
npm install react-hook-form react-bootstrap bootstrap
```

今回はredux使いませんから、前回と違いreduxに関連する設定は不要になります。

ではフォーム画面作ってみましょう

## 基本形

まず、既に生成されている `App.js` を少し書き換えてから、Form画面実装します。

```jsx:src/App.js
import React from 'react';
import './App.css';
import showResults from "./showResults";
import MyForm from "./MyForm";
import {
  Container,
  Row,
  Col,
} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <Container style={{padding: 15}}>
        <Row>
          <Col sm={10}>
            <h3>フォーム画面</h3>
            <MyForm onSubmit={showResults}/>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;
```

```jsx:src/MyForm.js
import React from 'react';
import useForm from 'react-hook-form'
import {
  Form,
  Row,
  Col,
  Button,
  ButtonToolbar,
} from 'react-bootstrap';

const MyForm = ({onSubmit}) => {
  const { register, handleSubmit, reset, formState } = useForm();
  return (
    <Form noValidate onSubmit={handleSubmit(onSubmit)}>
      <Form.Group as={Row} controlId={'name'}>
        <Form.Label column sm={2}>{'お名前'}</Form.Label>
        <Col sm={5}>
          <Form.Control
            name={'name'}
            placeholder={'Name'}
            type={'text'}
            ref={register({})}
          />
        </Col>
      </Form.Group>
      <Form.Group>
        <Col smOffset={2} sm={5}>
          <ButtonToolbar>
            <Button variant={'primary'} type="submit" disabled={!formState.dirty || formState.isSubmitting}>登録</Button>
            <Button variant={'secondary'} type="button" disabled={!formState.dirty || formState.isSubmitting} onClick={reset}>クリア</Button>
          </ButtonToolbar>
        </Col>
      </Form.Group>
    </Form>
  );
};

export default MyForm
```

submit時のサーバーとのリクエスト、レスポンスをエミュレートするための関数を書いておきます。

```javascript:src/showResults.js
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default (async function showResults(values) {
  await sleep(500);
  window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
});
```

Redux Formでは`reduxForm`関数によるformコンポーネントの修飾が必要で、且つ各入力フィールドは`Field`コンポーネントを経由して、描画する入力フィールド定義をしなければなりませんでした。今回は各入力コンポーネントに`ref={register({})}`と、`useForm`フックから取得した関数呼び出しを属性に付与するだけ、です。

適当な文字列をテキストボックスに入力後、`登録`ボタンを押下してみます。

![Screenshot from 2019-12-05 09-02-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/89f87e8b-4717-2bfe-d911-46f9a21ac3e9.png)

入力値が反映されたダイアログが上がりました。これは

```src/App.js
<MyForm onSubmit={showResults}/>
```

で`onSubmit`に指定されている関数の実行結果ですが、これは`MyForm`コンポーネントの

```src/MyForm.js
<Form noValidate onSubmit={handleSubmit(onSubmit)}>
```

の`handleSubmit`を経由して、指定した関数の引数に各フィールド値が入ったオブジェクトをReact Hook Formが渡してくれてるようです。

## 入力チェックしてみる

では今度はvalidationしてみたいと思います。Redux Formでは`Field`コンポーネント経由で描画する必要があるため、エラー発生時のbootstrapのスタイル指定などをする際のためには`Form.Group`単位等で切り出す必要ありましたが、今回は下記ような部分的な修正だけでも可能です。


```jsx:src/MyForm.js
const MyForm = ({onSubmit}) => {
  const { register, handleSubmit, errors, reset, formState } = useForm();
  return (
    <Form noValidate onSubmit={handleSubmit(onSubmit)}>
      <Form.Group as={Row} controlId={'name'}>
        <Form.Label column sm={2}>{'お名前'}</Form.Label>
        <Col sm={5}>
          <Form.Control
            name={'name'}
            placeholder={'Name'}
            type={'text'}
            isInvalid={errors.name}
            ref={register({
              required: "必須項目です！",
              maxLength : {
                value: 10,
                message: '10文字以内で指定してください'
              }
            })}
          />
          {
            errors.name &&
            <Form.Control.Feedback type="invalid">
              {errors.name.message}
            </Form.Control.Feedback>
          }
        </Col>
      </Form.Group>
      <Form.Group>
        <Col smOffset={2} sm={5}>
          <ButtonToolbar>
            <Button variant={'primary'} type="submit" disabled={!formState.dirty || formState.isSubmitting}>登録</Button>
            <Button variant={'secondary'} type="button" disabled={!formState.dirty || formState.isSubmitting} onClick={reset}>クリア</Button>
          </ButtonToolbar>
        </Col>
      </Form.Group>
    </Form>
  );
};
```

修正箇所は下記のようになります。

```jsx

  const { register, handleSubmit, errors, reset, formState } = useForm();
...
          <Form.Control
            name={'name'}
            placeholder={'Name'}
            type={'text'}
            isInvalid={errors.name}
            ref={register({
              required: "必須項目です！",
              maxLength : {
                value: 10,
                message: '10文字以内で指定してください'
              }
            })}
          />
          {
            errors.name &&
            <Form.Control.Feedback type="invalid">
              {errors.name.message}
            </Form.Control.Feedback>
          }
...
```

`useForm`フックから`errors`を取得して、`errors.name`に値があればinvalidとして扱い、メッセージを表示します。`register({ required: "必須項目です！" })`といった形式でvalidation定義をすることが可能になってます。

validation結果をbootstrapなスタイル指定と共に表示することも自然にできていまいました。

![Screenshot from 2019-12-08 16-26-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/0c550bca-6542-67cf-509d-86bc9ea19d2e.png)



## 初期化したい
編集画面などで初期化した状態でフォーム画面表示したい場合には、`useForm`のパラメータとして`defaultValues`の名称で初期値指定ができます。

```jsx:src/MyForm.js
  const {register, handleSubmit, errors, reset, formState} = useForm({defaultValues: {name: 'デフォルト表示'}});
    ...
```

画面リロードすると表示されました。

![Screenshot from 2019-12-05 15-09-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/9f8bc2f2-26e2-f736-19c6-70d850f2c90e.png)


この時何か編集をして`クリア`ボタン押すと、初期値に戻ります。ボタン押下時の動作は

```jsx:src/MyForm.js
<Button variant={'secondary'} type="button" disabled={!formState.dirty || formState.isSubmitting} onClick={reset}>クリア</Button>
</Button>
```

で定義されてますが、この`reset`関数で初期値に戻すことができるようになってます。

## 特定項目の値で挙動を変えたい

ある項目の入力可否が他の項目に依存していたり、特定項目の入力値で挙動を変えるために、描画時に特定の項目値を取得する必要があります。Redux Formは入力値がreduxの管理下にあるために`formSelector`という関数を使ってreduxのstoreにアクセスし、取得値をformコンポーネントに渡すという迂回した方法を取るしかなかったですが、React Hook Formでは`useForm`フックから取得できる`watch`関数によって実現可能です。


```jsx:src/MyForm.js
  const {register, handleSubmit, errors, reset, formState, watch /*<--これ*/} = useForm({defaultValues: {name: 'デフォルト表示'}});
    ...
```

あとはこれを使ってフィールドの表示制御するだけです。各項目汎用のコンポーネント定義をして少し整理します。

```jsx:src/MyForm.js
const Field =
  ({
     name,
     label,
     type,
     placeholder,
     error,
     register,
   }) => {
    return (
      <Form.Group as={Row} controlId={name}>
        <Form.Label column sm={2}>{label}</Form.Label>
        <Col sm={5}>
          <Form.Control name={name} placeholder={placeholder} type={type} isInvalid={error} ref={register}/>
          {
            error &&
            <Form.Control.Feedback type="invalid">
              {error.message}
            </Form.Control.Feedback>
          }
        </Col>
      </Form.Group>
    )
  };

const MyForm = ({onSubmit}) => {
  const { register, handleSubmit, watch, errors, reset, formState } = useForm({defaultValues: {name: 'デフォルト表示'}});
  const watchContact = watch('contact');
  return (
    <Form noValidate onSubmit={handleSubmit(onSubmit)}>
      <Field
        name="name"
        type="text"
        label="お名前"
        error={errors.name}
        register={register({
          required: "必須項目です！",
          maxLength : {
            value: 10,
            message: '10文字以内で指定してください'
          }
        })}
      />
      <Form.Group as={Row} controlId={'contact'}>
        <Form.Label column sm={2}>連絡先</Form.Label>
        <Col sm={5}>
          <Form.Check
            inline
            name={'contact'}
            type={'radio'}
            id={'contact-email'}
            value={'email'}
            label={'メール'}
            ref={register({})}
          />
          <Form.Check
            inline
            name={'contact'}
            type={'radio'}
            id={'contact-phone'}
            value={'phone'}
            label={'電話'}
            ref={register({})}
          />
        </Col>
      </Form.Group>
      {
        watchContact === 'email' &&
        <Field
          name="email"
          type="text"
          label="メールアドレス"
          placeholder="example@example.com"
          error={errors.email}
          register={register({})}
        />
      }
      {
        watchContact === 'phone' &&
        <Field
          name="phone"
          type="text"
          label="電話番号"
          placeholder="09011112222"
          error={errors.phone}
          register={register({})}
        />
      }
      <Form.Group>
        <Col smOffset={2} sm={5}>
          <Button variant={'primary'} type="submit" disabled={!formState.dirty || formState.isSubmitting}>登録</Button>
          {' '}
          <Button variant={'secondary'} type="button" disabled={!formState.dirty || formState.isSubmitting} onClick={reset}>クリア</Button>
        </Col>
      </Form.Group>
      </Form.Group>
    </Form>
  );
};

```

![Screenshot from 2019-12-08 16-28-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/ccec1c07-0a42-1fd6-8f04-f433641b941f.png)


できました。

## 階層化されたフィールド

複数の連絡先や家族情報の入力など、動的で且つ階層化された入力欄と、それに合わせて階層化された値の取得をしたい場合があります。今回は家族の名前を追加できるようにしてみたいと思います。

同一のフォームの配列はRedux Formでは `FieldArray` コンポーネントを使って実現してましたが、React Hook Formではここでも特別なことはせずに実現が可能です。

まず、react標準のフックである`useState`を使用して、家族の入力値を管理できるようにします。更にその値を使って、家族レコードの追加削除を表現する実装を追加します。

```jsx:src/MyForm.js
const MyForm = ({onSubmit}) => {
  const [familyIndexes, setFamilyIndexes] = useState([]);
  const formHooks = useForm({defaultValues: {name: 'デフォルト表示'}});
  const { register, handleSubmit, watch, errors, reset, formState } = formHooks;
  const watchContact = watch('contact');

  const addFamilies = () => {
    setFamilyIndexes(current => [...current, current.length > 0 ? Math.max(...current) + 1 : 0]);
  };

  const removeFamilies = index => () => {
    setFamilyIndexes(current => [...current.filter(i => i !== index)]);
  };
...
      <Families familyIndexes={familyIndexes} addFamilies={addFamilies} removeFamilies={removeFamilies} formHooks={formHooks}/>

```

次に配列形式でformフィールドを描画するコンポーネントを追加します。先ほど追加した `familyIndexes` の値を使って`name={'families[1].name'}`といった配列形式のフィールド名を指定することによって、form入力値を配列形式で管理することが可能になります。

```jsx:src/MyForm.js
const FamilyFields = ({familyIndex, index, removeFamilies, formHooks }) => {
  const fieldPrefix = `families[${familyIndex}]`;
  return (
    <ListGroup.Item>
      <Form.Row>
        <Button variant={'danger'} type="button" style={{marginRight: '10px'}} onClick={removeFamilies(familyIndex)}>削除</Button>
        <Form.Label column sm={2}>家族 {index + 1}</Form.Label>
        <Col sm={4}>
          <Form.Control
            name={`${fieldPrefix}.name`}
            type="text"
            ref={formHooks.register}/>
        </Col>
      </Form.Row>
    </ListGroup.Item>
  );
};

const Families = ({ familyIndexes, addFamilies, removeFamilies, formHooks }) => (
  <Form.Group as={Row}>
    <Form.Label column sm={2}>家族</Form.Label>
    <Col sm={8}>
      <ButtonToolbar>
        <Button variant={'secondary'} type="button" onClick={addFamilies}>追加</Button>
      </ButtonToolbar>
      <ListGroup>
        {
          familyIndexes.map((familyIndex, index) =>
            <FamilyFields key={familyIndex} familyIndex={familyIndex} index={index} removeFamilies={removeFamilies} formHooks={formHooks} />
          )
        }
      </ListGroup>
    </Col>
  </Form.Group>
);

```



こんな感じの入力で、

![Screenshot from 2019-12-12 16-28-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/a44cca6e-9266-1fab-2475-3ec0a64c92b8.png)


表示が部分的ですが、値が階層化されて取れてます。

![Screenshot from 2019-12-05 20-46-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/6557cc5e-8f60-3b0b-4119-3617639024d5.png)

## 非同期でサーバーでのvalidationがしたい

Redux Formでは非同期validationを特定フィールドに指定する仕組みがありましたが、React Hook Formではどうでしょうか。

ここでは電話番号を非同期チェックしてみたいと思います。まず、サーバーサイドvalidationをエミュレートする実装を用意します。

```javascript:src/asyncValidate.js
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

export default (async function asyncValidate(phone) {
  await sleep(1000);
  if (!!phone && !phone.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) {
    return false;
  }
  return true;
});
```

これを単に`register`関数のvalidation定義で非同期呼び出しするだけです。

```jsx
        <Field
          name="phone"
          type="text"
          label="電話番号"
          placeholder="09011112222"
          error={errors.phone}
          register={register({
            validate: async value => await asyncValidate(value) || '不正な電話番号です'
          })}
        />
```

特別なこと知らずとも直感的な実装ができるのはいいですね。

![Screenshot from 2019-12-08 16-35-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/c1f726b1-ce29-fc70-6fd4-0e6f2ea07d35.png)


## 複数画面に分割されたフォーム

モーダルや画面遷移などで表示された別フォームでの入力を、同じフォームの値として保持したい場合にどうするか、というケースになります。Redux Formは値がreduxのstore管理になっていたため、コンポーネントのumount時にform値消去をしない設定をするだけで複数画面にまたがるform値維持が可能でした。React Hook Formではどうでしょうか。

まず、前回と同様に家族の情報を入力するフォームを別画面にしてみます。`src/App.js`でstateフックを使ってページ番号を取得・設定できるようにし、表示画面を制御します。更に、submitまでの全フィールド値を管理する値もstateフックで作成し、そこに各ページformのsubmit時に値をマージする形にします。

```jsx:src/App.js
import React, { useState }  from 'react';
import './App.css';
import showResults from "./showResults";
import MyForm from "./MyForm";
import MyFamilyForm from "./MyFamilyForm";
import {
  Container,
  Row,
  Col,
} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState({});
  const nextPage = (values) => {
    setPage(page + 1);
    setData(prevData => ({
      ...prevData,
      ...values,
    }));
  };

  return (
    <div>
      <Container style={{padding: 15}}>
        <Row>
          <Col sm={10}>
            <h3>フォーム画面</h3>
            {
              page === 1 &&
              <MyForm onSubmit={nextPage} />
            }
            {
              page === 2 &&
              <MyFamilyForm onSubmit={(values) => showResults({
                ...data,
                ...values,
              })}
              />
            }
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;
```

元の`MyForm.js`から家族情報を切り出します

```jsx:src/MyForm.js
import React  from 'react';
import useForm from 'react-hook-form'
import {
  Form,
  Row,
  Col,
  Button,
  ButtonToolbar,
} from 'react-bootstrap';
import asyncValidate from "./asyncValidate";

const Field =
  ({
     name,
     label,
     type,
     placeholder,
     error,
     register,
   }) => {
    return (
      <Form.Group as={Row} controlId={name}>
        <Form.Label column sm={2}>{label}</Form.Label>
        <Col sm={5}>
          <Form.Control name={name} placeholder={placeholder} type={type} isInvalid={error} ref={register}/>
          {
            error &&
            <Form.Control.Feedback type="invalid">
              {error.message}
            </Form.Control.Feedback>
          }
        </Col>
      </Form.Group>
    )
  };

const MyForm = ({onSubmit}) => {
  const { register, handleSubmit, watch, errors, reset, formState } = useForm({defaultValues: {name: 'デフォルト表示'}});
  const watchContact = watch('contact');

  return (
    <Form noValidate onSubmit={handleSubmit(onSubmit)}>
      <Field
        name={'name'}
        type="text"
        label="お名前"
        error={errors.name}
        register={register({})}
      />
      <Form.Group as={Row} controlId={'contact'}>
        <Form.Label column sm={2}>連絡先</Form.Label>
        <Col sm={5}>
          <Form.Check
            inline
            name={'contact'}
            type={'radio'}
            id={'contact-email'}
            value={'email'}
            label={'メール'}
            ref={register({})}
          />
          <Form.Check
            inline
            name={'contact'}
            type={'radio'}
            id={'contact-phone'}
            value={'phone'}
            label={'電話'}
            ref={register({})}
          />
        </Col>
      </Form.Group>
      {
        watchContact === 'email' &&
        <Field
          name="email"
          type="text"
          label="メールアドレス"
          placeholder="example@example.com"
          error={errors.email}
          register={register({})}
        />
      }
      {
        watchContact === 'phone' &&
        <Field
          name="phone"
          type="text"
          label="電話番号"
          placeholder="09011112222"
          error={errors.phone}
          register={register({
            validate: async value => await asyncValidate(value) || '不正な電話番号です'
          })}
        />
      }
      <Form.Group>
        <Col smOffset={2} sm={5}>
          <Button variant={'primary'} type="submit" disabled={!formState.dirty || formState.isSubmitting}>登録</Button>
          {' '}
          <Button variant={'secondary'} type="button" disabled={!formState.dirty || formState.isSubmitting} onClick={reset}>クリア</Button>
        </Col>
      </Form.Group>
      </Form.Group>
      </Form.Group>
    </Form>
  );
};

export default MyForm
```

```jsx:src/MyFamilyForm.js
import React, { useState }  from 'react';
import useForm, { FormContext, useFormContext } from 'react-hook-form'
import {
  Form,
  Row,
  Col,
  Button,
  ButtonToolbar,
  ListGroup,
} from 'react-bootstrap';

const FamilyFields = ({familyIndex, index, removeFamilies }) => {
  const { register } = useFormContext();
  const fieldPrefix = `families[${familyIndex}]`;
  return (
    <ListGroup.Item>
      <Form.Row>
        <Button variant={'danger'} type="button" style={{marginRight: '10px'}} onClick={removeFamilies(familyIndex)}>削除</Button>
        <Form.Label column sm={2}>家族 {index + 1}</Form.Label>
        <Col sm={4}>
          <Form.Control
            name={`${fieldPrefix}.name`}
            type="text"
            ref={register}/>
        </Col>
      </Form.Row>
    </ListGroup.Item>
  );
};

const Families = ({ familyIndexes, addFamilies, removeFamilies }) => (
  <Form.Group as={Row}>
    <Form.Label column sm={2}>家族</Form.Label>
    <Col sm={8}>
      <ButtonToolbar>
        <Button variant={'secondary'} type="button" onClick={addFamilies}>追加</Button>
      </ButtonToolbar>
      <ListGroup>
        {
          familyIndexes.map((familyIndex, index) =>
            <FamilyFields key={familyIndex} familyIndex={familyIndex} index={index} removeFamilies={removeFamilies} />
          )
        }
      </ListGroup>
    </Col>
  </Form.Group>
);

const MyFamilyForm = ({onSubmit}) => {
  const [familyIndexes, setFamilyIndexes] = useState([]);
  const formMethods = useForm({});
  const { handleSubmit, formState } = formMethods;

  const addFamilies = () => {
    setFamilyIndexes(current => [...current, current.length > 0 ? Math.max(...current) + 1 : 0]);
  };

  const removeFamilies = index => () => {
    setFamilyIndexes(current => [...current.filter(i => i !== index)]);
  };

  return (
    <FormContext {...formMethods} >
      <Form noValidate onSubmit={handleSubmit(onSubmit)}>
        <Families familyIndexes={familyIndexes} addFamilies={addFamilies} removeFamilies={removeFamilies} />
        <Form.Group>
          <Col smOffset={2} sm={5}>
            <Button variant={'primary'} type="submit" disabled={!formState.dirty || formState.isSubmitting}>登録</Button>
          </Col>
      </Form.Group>
        </Form.Group>
      </Form>
    </FormContext>
  );
};

export default MyFamilyForm
```

`MyFamilyForm.js`では`FormContext`と`useFormContext`が新しく登場しますが、名前の通り、これを使うことでネストしたformコンポーネントにフックから取得したメソッド類を明示的にprops経由でバケツリレーしないでよくなります。

React Hook Formのformフックは表示されているformコンポーネントの値のみが有効になってしまうので、`App.js`で`useForm({})`してその値を各ページコンポーネントに渡す形ではダメでした。ですので、上の例のような何かしらform値全体を表現する値にページごとの値をマージしていく必要があるようです。

ここは少し不便なようにも思われましたが、Redux Formのようにライブラリならではの特殊な設定値を知る必要が無い、という点はやはりよいところかと思います。また、上記のような管理を汎用的にやりたい場合は、状態管理のライブラリを別途利用することもよい選択かと思われます。ちなみにReact Hook Formのドキュメントでは[little-state-machine](https://github.com/bluebill1049/little-state-machine)を使用した例が[記載されてます](https://react-hook-form.com/advanced-usage#WizardFormFunnel)。redux使っても良いと書かれてますが、冒頭で述べた通り、form値の類をreduxのstore管理するのはよろしくないとのことで、今後は避けたほうがよいのでしょう。

では動かしてみます。

![Screenshot from 2019-12-08 16-37-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/9e8a713e-c086-1e16-7b21-6059df5c48bb.png)


画面遷移して登録ボタン押すと

![Screenshot from 2019-12-12 16-42-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44925/289f1e67-b50c-3a11-4148-dbdcb4a5bee5.png)


無事複数画面をまたいだ値を submit することができたようです。

## 感想
form実装でよくあるパターンで軽く実装してみましたが、思ったよりも使いやすかったというのが感想です。とにかくライブラリ独自方言の設定や記述方法を学習する必要があまり無い、というのが大きいですし、hooks使えば当然なのでしょうが、コード量は確実に減ります。しかも高階にするなどの方法と違って見通しが非常によいところが好感持てます。

また、ここでは記載しませんでしたが、React Hook Formは他の同様のライブラリと比較してパフォーマンス的にも優位にあるそうです。更に、より複雑なvalidationについては、[Yup](https://github.com/jquense/yup)のschemaとの連携なども可能になっていたり、リッチなUIコンポーネントとの連携も可能になってます。

form配列や複数画面のformを扱うところはもう少しライブラリの機能があるといいな、とは思いましたが、通常の実装で必要な一通りのことは十分サポートしてくれてると思います。まだ新しめのライブラリですから、今後の拡張にも期待できるのではないでしょうか。

## 参考
[React Hook Form - Simple React forms validation](https://react-hook-form.com/)
[React form validation library built under 5kB - Bill - Medium](https://medium.com/@bruce1049/form-validation-with-hook-in-3kb-c5414edf7d64)
[React Hook Form vs. Formik: A technical and performance comparison - LogRocket Blog](https://blog.logrocket.com/react-hook-form-vs-formik-a-technical-and-performance-comparison/)