Reactで実装したフォームのパフォーマンスが問題になるのはなぜか

2024/01/15 30 users React 久保田光則 Form 枠組み ライブラリ

RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 ... 続きを読む

パフォーマンスを気にするならReact Hook Formが無難

2023/12/30 56 users Form ライブラリ パフォーマンス CPU 計測

React Hook Form は高速。 Formik は早くない。改善は可能。 React Final Form はある程度早い。 React Hook Form が無難ではあるものの、CPU 6× slowdown で 100ms は通常では許容できると考え Formik を採用するのもあり。 比較したライブラリ 計測の対象にしたライブラリは以下の 3 つです。 React Hook Form Formik ... 続きを読む

Kuma UI はどのように React Server Components をサポートしているのか

2023/12/20 6 users React Server Components メンテナ

はじめに こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 私は OSS が大好きで、React Hook Form や Kuma UI のメンテナとしても活動しています。 弊社のプロダクトでは CSS ライブラリとして Emotion を採用していますが、ランタイムでのパフォーマンス上の問題や App ... 続きを読む

サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog

2023/11/21 38 users Mirrativ tech blog Mui 管理画面 体験

こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登... 続きを読む

🏏 素振り: React Hook Form - memo_md

2022/10/08 12 users Form 素振り memo_md Register フック

あーはいはい、React Hook Formね、知ってる知ってる（知らない） そんな状態なので素振りしておく。 React Hook Form https://react-hook-form.com/get-started React Hook Form の重要なコンセプトの一つは、非制御コンポーネント (Uncontrolled Components) をフックに登録（register) し、フォームフィールドの値を... 続きを読む

READYFORのOSSポリシーを公開しました - READYFOR Tech Blog

2022/09/01 5 users ReadyFor コントリビュート github.com

こんにちは、READYFORでVP of Engineeringをしております、いとひろです。 この度、めでたくREADYFORのOSSポリシーをGitHub上で公開しましたので、共有いたします 👏👏👏 github.com OSSポリシー策定の背景 READYFORでは、息をするようにOSSにコントリビュートをしている @kotarella1110（React Hook Formコアコントリビ... 続きを読む

React Hook Form でも再描画に気を付ける

2022/08/28 10 users Form useState watch コンポーネント 再描画

React Hook Form を使うと、useStateを使う制御フォームにありがちな「頻繁な再描画」を手短かに防ぐことができます。しかし、使い方によっては、その利点を崩してしまうことがあります。それが、useFormの戻り値に含まれるwatchの使用です。 watch は頻繁な再描画の原因になる 次のコンポーネントは、よくあるサインア... 続きを読む

React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita

2022/07/16 16 users SaaS Qiita Suspense taro Form

はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしている作っているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっと... 続きを読む

React Hook Formを1年以上運用してきたちょっと良く使うためのTips in ログラス（と現状の課題）

2022/03/25 71 users Form React ベストプラクティス 特段 Tips

はじめに 早いものでこちらの記事が公開して約1年、ログラスでReactを書き始めて1年以上が経ちました。 今回はフロントエンドのアプリの中でも特段重要なフォーム、特にReact Hook Formについての解説をしていきます。 今回のTipsは公式がベストプラクティスとして発表しているものではなく、あくまで個人が1年間の経験... 続きを読む

React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita

2022/01/04 12 users Qiita React TypeScript Form 本稿

React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかり... 続きを読む

React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO

2021/08/26 6 users React DevelopersIO Form つい先月

React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えて... 続きを読む

Reactでウェブフォームを作る2021

2021/03/07 81 users フォームライブラリ ベストプラクティス Form React

Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 Re... 続きを読む

React Hook Formのアップデート内容 - Version 7 - Qiita

2021/02/23 12 users Qiita Form Marina 初日 アップデート内容

(❤️ ブログ記事を翻訳してくれた日本のチーム、Kotaro、Keiya、Marinaに感謝します。) React Hook Formもそろそろ2年目を迎えようとしています。プロジェクト自体は、初日と同じように今でも活発に活動しています。この数年の間に、バージョン7の作成やデザインに繋がる多くの学びや経験がありました。私はここで、次のメ... 続きを読む

Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook Form - Qiita

2020/12/14 8 users ReadyFor Qiita React Form 菅原

この記事は READYFOR Advent Calendar 2020の13日目の記事です。 はじめに こんにちは。今年の11月から READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ React と TypeScript が好きで、React Hook Form のメンバーだったりもします。React Hook Form は TypeScript で記述されている... 続きを読む