DX
直感的で完全な機能の API はフォームを構築する際に開発者に優れたエクスペリエンスの提供します。
高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ。
直感的で完全な機能の API はフォームを構築する際に開発者に優れたエクスペリエンスの提供します。
既存の HTML マークアップを活用し、Constraint Validation API でフォームバリデーションを開始します。
パッケージのサイズもパフォーマンス同様に重要です。依存関係のない小さなライブラリです。
再レンダリング数を最小限に抑えマウントを高速化し、最高なユーザーエクスペリエンスを提供します。
フォームの状態は、ローカルで管理されるため、他に依存せず簡単に使用することができます。
2020年GitNation React OS AwardのProductivity Boosterを受賞しました。
コードの記述量を減らすことは、React Hook Form の主な目標の一つです。 これを説明するために、最も一般的なフォームバリデーションライブラリを使用した非常にシンプルなコードを見てみましょう。
⚠ 注意:下記の Formik と Redux-Form のコードは公式ドキュメントからコピーされています。
import React from "react"; import { useForm } from "react-hook-form"; const Example = () => { const { handleSubmit, register, errors } = useForm(); const onSubmit = values => console.log(values); return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="email" ref={register({ required: "Required", pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: "invalid email address" } })} /> {errors.email && errors.email.message} <input name="username" ref={register({ validate: value => value !== "admin" || "Nice try!" })} /> {errors.username && errors.username.message} <button type="submit">Submit</button> </form> ); };
コンポーネントの再レンダリングを分離して、ページまたはアプリケーションのパフォーマンスを向上させることができます。 次の例は、このような動作を示しています。
注意: 入力欄に入力してレンダリングの動作を確認してください。
VS
フォームを実装する用件の中でパフォーマンスはユーザー体験において重要なものです。 あなたは個別のinput要素の変更をフォーム全体の再レンダリングなしに監視することができます。
ユーザーによってどのくらいコンポーネントが再レンダリングされたか気になったことはありますか? React Hook Form は非制御フォームバリデーションを採用してパフォーマンスへの影響を軽減します。
合計再レンダリング数: 30+
合計再レンダリング数: 3
合計再レンダリング数: 30+
下記の結果は、コンポーネントのレンダリングにかかった時間を示しています。 Chrome DevTools の Performance タブを使用して、 CPU のパフォーマンスを6倍低速化させた環境での測定結果です。 実行コードは上記のライブラリのコード比較セクションのものです。
⚠ より強力なパフォーマンステストを見たいですか?こちらから1000フィールドを含むフォームのパフォーマンテスト結果をご覧ください。
下記のフォームは、実行中のフォームバリデーションを示しています。 各列はカスタムフックに取り込まれた内容を表します。編集ボタンをクリックしてフォームのフィールドを変更することもできます。
ⓘ 監視されている値を表示するには入力値を変更します。
{}
ⓘ ここにバリデーションエラーが表示されます。
ⓘ タッチされたフィールドがここに表示されます。
[]
フォームバリデーションはより簡単にする必要があります。React Hook Form を使用すると、コードの記述が少なくなり、パフォーマンスが向上します。はじめるセクションを見て、API ドキュメントページで詳細を確認してください。