コンテンツへスキップ

React Hook Form

使いやすいバリデーション機能を備えた、高性能で柔軟性と拡張性に優れたフォーム。

React Web

React Native

開発者体験 (DX)

直感的で機能豊富なAPIにより、開発者はシームレスな体験でフォームを構築できます。

HTML標準

既存のHTMLマークアップを活用し、制約ベースのバリデーションAPIでフォームを検証します。

超軽量

パッケージサイズは重要です。React Hook Formは依存関係のない小さなライブラリです。

パフォーマンス

再レンダリングの回数を最小限に抑え、検証計算を最小限に抑え、マウントを高速化します。

採用容易性

フォームの状態は本質的にローカルであるため、他の依存関係なしに簡単に採用できます。

ユーザーエクスペリエンス (UX)

最高のユーザーエクスペリエンスを提供し、一貫性のある検証戦略を実現することに尽力しています。

サポートとバックアップ

Casino ReviewsBEEKAI Form builderroute4metwicsy

少ないコードで、より高性能に

React Hook Formは、記述するコードの量を削減し、不要な再レンダリングを排除します。次の例で探索してみましょう。

React Hook 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>
);
};

再レンダリングの分離

コンポーネントの再レンダリングを分離することで、ページやアプリのパフォーマンスを向上させることができます。次の例で説明します。

React Hook Form

子コンポーネントA
子コンポーネントB
子コンポーネントC

制御されたフォーム

子コンポーネントA
子コンポーネントB
子コンポーネントC

サブスクリプション

パフォーマンスは、フォーム構築におけるユーザーエクスペリエンスの重要な側面です。個々の入力とフォームの状態更新を購読して、フォーム全体を再レンダリングせずに済ませることができます。

高速マウント

次のスクリーンショットは、React Hook Formが他のものと比べてどれだけ高速にコンポーネントをマウントするかを示しています。

React Hook Form

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

その他

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

ハイライト

このプロジェクトはコミュニティと業界から注目を集めています。これまで以上に多くの開発者がReactでフォームを構築するのに役立っています。

JavaScriptライジングスター

React Hook Formは、フックを中心に成熟し進化してきました。React開発の一部を簡素化します。

Reactオープンソースアワード

2020年GitNation React OS Awardの生産性向上部門で受賞。

テクノロジーレーダー

このプロジェクトは、言語とフレームワークセクションのレーダーに掲載される幸運に恵まれています。

コミュニティ

コミュニティによって構築され、推進されています。フォーム構築に関して、すべてのReact開発者の生活を楽にするという使命を負っています。

まさにこれです。よく考え抜かれ、必要な時に邪魔にならないほど柔軟なReactフォームライブラリです。長年Reactフォームをいじってきた後、react-hook-formに切り替えると、まるで超能力を得たようです。すべてが高速化され、コードはよりクリーンになりました。

react-hook-formを使えば、Reactアプリケーションの構築中にフォームの作成が複雑になることはありません。バリデーションが非常に簡単なので、ほとんどの場合、このパッケージを使用してフォームを作成しています。Formikaでの作業をやめて以来、私にとって最高のフォームメーカーです。非常に優れたユーザーインターフェースとパフォーマンスです。

Reactアプリを構築する際にこれまで使用した中で最高のReactフォームライブラリです。そのユーティリティとシンプルさのためです。FormikやRedux Formと比較して、多くの便利なツールがあり、多くのコードを必要としません。アプリケーションでの再レンダリング回数が少なく、マウント時間が短いので、非常にスムーズです。

ライブデモ

次のフォームは、動作中のフォームバリデーションを示しています。各列は、カスタムフックでキャプチャされた内容を表しています。また、**編集**ボタンをクリックしてフォームのフィールドを変更することもできます。

または

確認

入力値を変更して、監視対象の値を更新します。

{}

エラー

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

タッチ済み

タッチ済みのフィールドが表示されます。

[]

始めましょう!

フォーム処理は苦痛である必要はありません。React Hook Formは、コードの量を減らしながら、パフォーマンスを向上させるのに役立ちます。

編集