Skip to content

React Hook Form

高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ。

React Web

React Native

DX

直感的で完全な機能の API はフォームを構築する際に開発者に優れたエクスペリエンスの提供します。

HTML 標準

HTML 標準

既存の HTML マークアップを活用し、Constraint Validation API でフォームバリデーションを開始します。

超軽量

超軽量

パッケージのサイズもパフォーマンス同様に重要です。依存関係のない小さなライブラリです。

パフォーマンス

パフォーマンス

再レンダリング数を最小限に抑えマウントを高速化し、最高なユーザーエクスペリエンスを提供します。

適応性

適応性

フォームの状態は、ローカルで管理されるため、他に依存せず簡単に使用することができます。

授賞式

2020年GitNation React OS AwardのProductivity Boosterを受賞しました。

ライブラリのコード比較

コードの記述量を減らすことは、React Hook Form の主な目標の一つです。 これを説明するために、最も一般的なフォームバリデーションライブラリを使用した非常にシンプルなコードを見てみましょう。

⚠ 注意:下記の Formik と Redux-Form のコードは公式ドキュメントからコピーされています。

React Hook Form

import React from "react";
import { useForm } from "react-hook-form";

const Example = () => {
  const { handleSubmit, register, formState: { errors } } = useForm();
  const onSubmit = values => console.log(values);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register("email", {
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message}

      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message}

      <button type="submit">Submit</button>
    </form>
  );
};
Barcode

コンポーネントの再レンダリングを分離

コンポーネントの再レンダリングを分離して、ページまたはアプリケーションのパフォーマンスを向上させることができます。 次の例は、このような動作を示しています。

注意: 入力欄に入力してレンダリングの動作を確認してください。

React Hook Form

Child Component A
Child Component B
Child Component C

VS

Controlled Form

Child Component A
Child Component B
Child Component C

入力の変更を監視

フォームを実装する用件の中でパフォーマンスはユーザー体験において重要なものです。 あなたは個別のinput要素の変更をフォーム全体の再レンダリングなしに監視することができます。

Barbell

レンダリングを削減

ユーザーによってどのくらいコンポーネントが再レンダリングされたか気になったことはありますか？ React Hook Form は非制御フォームバリデーションを採用してパフォーマンスへの影響を軽減します。

合計再レンダリング数： 3

合計再レンダリング数： 30+

高速なマウント

下記の結果は、コンポーネントのレンダリングにかかった時間を示しています。 Chrome DevTools の Performance タブを使用して、 CPU のパフォーマンスを6倍低速化させた環境での測定結果です。 実行コードは上記のライブラリのコード比較セクションのものです。

React Hook Form

  • マウント数: 1
  • 変更コミット数: 1
  • 合計時間: 1800ms
React Hook Form performance

Others

  • マウント数: 6
  • 変更コミット数: 1
  • 合計時間: 2070ms
Formik performance
  • マウント数: 17
  • 変更コミット数: 2
  • 合計時間: 2380ms
Redux Form performance

Highlights

This project is getting recognized by the community and industry. It's helping more developers to build forms in React than ever.

The Community

Build and drive by the community. On a mission to make every React developer's life easier when it comes to building forms.

ライブデモ

下記のフォームは、実行中のフォームバリデーションを示しています。 各列はカスタムフックに取り込まれた内容を表します。編集ボタンをクリックしてフォームのフィールドを変更することもできます。

例

or

監視

ⓘ 監視されている値を表示するには入力値を変更します。

{}

エラー

ⓘ ここにバリデーションエラーが表示されます。

タッチ
ⓘ タッチされたフィールドがここに表示されます。
[]
便利で面白いと思いますか？
フォームバリデーションはより簡単にする必要があります。React Hook Form を使用すると、コードの記述が少なくなり、パフォーマンスが向上します。はじめるセクションを見て、API ドキュメントページで詳細を確認してください。