Jestを使ってReact Hook Form + Yupのテストをする
React Hook FormとYupを使ったフォームのテストをJestで書いてみました。 Reactを使ったフォームのレンダリングは行わずに、フォームのロジックのみをテストします。 フォームに値をセットして、フォーム送信時に使われる handleSubmit で出力される最終データをチェックします。 スキーマ定義によって出力データが意図しない結果になるバグがあり、コンパクトに検証するために作成したテストです。 testing-libraryのrenderHookを使って React Hook Form のフォームへのアクセスを得る 今回は Testing Libraryを使って React Hook のテストを行います。 React Hook Formはフォームの状態管理を行う useForm というカスタム・フックを提供しています。 renderHookでuseFormをレンダリングし
画面遷移時に不要なAPI通信を中止してパフォーマンスを向上させる
事前準備 実際にコードを動かす前に不要なリクエストを打ち切った場合とそうでない場合の違いをわかりやすくするためにブラウザの開発者ツールから通信速度の調整をします。 ネットワークタブを開いて以下の画像のように No throttling をクリックし Slow 3G を選択してください。こうすることで通信速度が遅くなり、不要なレンダリングが発生しないことがわかりやすくなります。 リクエストを中止しない場合とする場合のレンダリングの違い 実際に実装したものはこちらです。 リクエストを中止しない場合の挙動を見たい時：Not Cancel Fetch をクリック リクエストを中止する場合の挙動を見たい時：Cancel Fetch Fetch をクリック /1の URL にアクセスした場合、ユーザー ID が 1 のものを取得しブラウザに表示しています。4 つのボタンがありますが、それぞれのボタンの
Next.jsで戻る厨を満たすrecoil-sync-next
以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー
FirebaseとTypeScriptとNext.jsを使ってリアルタイムチャットアプリを作ろう
この本ではFirebaseとTypeScriptとNext.jsを使ってリアルタイムチャットアプリを作ります。
Reactでフォームをスマートに実装
この記事は、2021/9/2 に行われた WESEEK Tech Conference の内容をまとめたものです。 目次 はじめに この記事ではフォームの基礎について扱い, その後 React でのフォームの基礎, 実装をしてみてライブラリ (react-hook-form) を導入する話, react-hook-form の基礎と導入例について扱います 対象読者とこの記事で扱う内容 React のフォームの基礎を知りたい フォームってなんだろう Controlled or Uncontrolled とその基礎 react-hook-form について知りたい 基礎 Tips, GROWI.cloud での導入事例 そもそもフォームどういうもの ? ユーザとアプリケーションでの対話を表現しているもの。いろいろ種類がある。 一番単純なフォームから考えてみる 名前を入力したら Submit を
React Hooksを最大限利用したFormの実装🔥
2021.10.01追記 記事執筆時点からこの記事の実装についての筆者のスタンスが変わってきたので補足します。伝えたいのは以下です。 プロダクトでフォーム実装を考える際は、React Hook FormやReact Final Formの導入も検討ください。この記事はReactとTSの実装を理解するのには役立ちますが、プロダクト実装に耐えうるかはわからないです。 以下、お気持ちです。 執筆当時、筆者はReactでのフォームの実装は公式にあるようなコントローラブルな本記事の実装一択だ、これが一番拡張性があり、可読性も高い実装だと思っていました(正直視野狭かったですね…) 実際にプロダクトで運用してみると、入力内容の監視を行うとパフォーマンスがめちゃくちゃ悪くなったり、項目を追加させるようなフォームでは秘伝のタレみたいな実装をせざるおえなかったり、結局先に挙げたようなデファクトスタンダードなラ
【備忘録】React Hook Form(v7)を使って、ネストされたフォームを実装する
記事の概要 react-hook-form を使ってネストされたフォームを実装する際に使用する useFieldArray に関して、実装時に少し詰まったのと、公式が用意していた example が TS で書かれていなかったので、備忘録としてこちらに残します。 公式が出している example に関してはこちらから参照していただければと思います。 前提として、記事内部で使用する使用ライブラリのバージョンは以下の通りです。 React v17.0.2 React Hook Form v7.15.4 TypeScript v4.1.2 React Hook From について React Hook Form は hooks ベースのフォームライブラリです。 フォームの値を取得・変更したり、バリデーションの設定などを行うことができます。 また、React 側で状態を管理しない非制御コンポーネン
結局 React のコンポーネントにはどうやって型をつければ良いのさ - kk-web
React TypeScript Cheatsheet の Useful Patterns by Use Case の Wrapping/Mirroring に答えが書かれていました。 自分は function でなく const で作成することが多い(どっちが良いんですかね？)ので、以下のように書くのが良さそうです。 import React, { ComponentPropsWithoutRef, FC } from "react"; export type ButtonProps = ComponentPropsWithoutRef<"button"> & { specialProp?: string; }; const Button: FC<ButtonProps> = ({ specialProp, ...props }: ButtonProps) => { console.lo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zxcvbnライブラリを使ったサインアップフォームのデモ | ISSUE