開発者体験 (DX)
直感的で機能豊富なAPIにより、開発者はシームレスな体験でフォームを構築できます。
使いやすいバリデーション機能を備えた、高性能で柔軟性と拡張性に優れたフォーム。
直感的で機能豊富なAPIにより、開発者はシームレスな体験でフォームを構築できます。
既存のHTMLマークアップを活用し、制約ベースのバリデーションAPIでフォームを検証します。
パッケージサイズは重要です。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)}><inputtype="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が他のものと比べてどれだけ高速にコンポーネントをマウントするかを示しています。
このプロジェクトはコミュニティと業界から注目を集めています。これまで以上に多くの開発者がReactでフォームを構築するのに役立っています。
React Hook Formは、フックを中心に成熟し進化してきました。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は、コードの量を減らしながら、パフォーマンスを向上させるのに役立ちます。