DX
直感的で完全な機能の API はフォームを構築する際に開発者に優れたエクスペリエンスを提供します。
高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ。
直感的で完全な機能の API はフォームを構築する際に開発者に優れたエクスペリエンスを提供します。
既存の HTML マークアップを活用し、Constraint Validation API でフォームバリデーションを開始します。
パッケージのサイズもパフォーマンス同様に重要です。依存関係のない小さなライブラリです。
再レンダリング数を最小限に抑えマウントを高速化し、最高なユーザーエクスペリエンスを提供します。
フォームの状態は、ローカルで管理されるため、他に依存せず簡単に使用することができます。
2020年GitNation React OS AwardのProductivity Boosterを受賞しました。
コードの記述量を減らすことは、React Hook Form の主な目標の一つです。 これを説明するために、最も一般的なフォームバリデーションライブラリを使用した非常にシンプルなコードを見てみましょう。
⚠ 注意:下記の Formik と Redux-Form のコードは公式ドキュメントからコピーされています。
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> ); };
コンポーネントの再レンダリングを分離して、ページまたはアプリケーションのパフォーマンスを向上させることができます。 次の例は、このような動作を示しています。
注意: 入力欄に入力してレンダリングの動作を確認してください。
VS
フォームを実装する用件の中でパフォーマンスはユーザー体験において重要なものです。 あなたは個別のinput要素の変更をフォーム全体の再レンダリングなしに監視することができます。
下記の結果は、コンポーネントのレンダリングにかかった時間を示しています。 Chrome DevTools の Performance タブを使用して、 CPU のパフォーマンスを6倍低速化させた環境での測定結果です。 実行コードは上記のライブラリのコード比較セクションのものです。
This project is getting recognized by the community and industry. It's helping more developers to build forms in React than ever.
React Hook Form have matured and evolved around hooks. Simplifies a piece of React development.
The winner of 2020 GitNation React OS Award for the category of Productivity Booster.
The project is fortunate enough to be under the radar for the Languages & Frameworks section.
Build and drive by the community. On a mission to make every React developer's life easier when it comes to building forms.
This is where it's at. A React form library that is both well thought out and flexible enough to get out of your way when you need it to. After fussing around with React forms for years, switching to react-hook-form feels like a superpower. Everything runs faster and my code is cleaner.
Creating a form is no more complicated while building a react application with the help of react-hook-form. Most of the time I use this package for creating a form as validation is so much simple here. It is the best form maker for me while I stop to work with formika. Very nice user interface and performance are good.
The best React form library that I have ever used while building a react app because of its utility and simplicity. It has a lot of useful tools and doesn’t require much code compared to Formik, and Redux Form. As the number of re-renders in the application is small and mounting time is less it is super smooth.
下記のフォームは、実行中のフォームバリデーションを示しています。 各列はカスタムフックに取り込まれた内容を表します。編集ボタンをクリックしてフォームのフィールドを変更することもできます。
ⓘ 監視されている値を表示するには入力値を変更します。
{}
ⓘ ここにバリデーションエラーが表示されます。
ⓘ タッチされたフィールドがここに表示されます。
[]
フォームバリデーション はより簡単にする必要があります。React Hook Form を使用すると、コードの記述が少なくなり、パフォーマンスが向上します。はじめるセクションを見て、API ドキュメントページで詳細を確認してください。