送信ボタンを続けて押しても、注文が1件だけ作られるようにする方法です。送信中にボタンを無効にする書き方、refで止める書き方、formのactionの場合と、サーバー側でIdempotency-Keyを使う方法を確かめました。 ...

‘use server’ を書いた関数を form の action に渡すと、入力は FormData としてサーバーの関数に届きます。Next.js 16 で、送られるリクエストの形、JavaScript ...

React 19のuseFormStatusを使うと、フォームの中に置いたボタンの部品が、propsなしで送信中かどうかを読めます。使い回せる送信ボタンを作り、押したボタンの見分け方や、pendingがtrueにならない置き方を確かめ ...

React 19 のコンポーネントを、Vitest と React Testing Library でテストする手順です。後片づけの登録、findBy での待ち方、Suspense を使うコンポーネントを await act で描画す ...

React 19 の use と Suspense は「待つ表示」、useActionState は「送信中の状態」を受け持ちますが、データのキャッシュは受け持ちません。自前のキャッシュと TanStack Query で同じ画面を作 ...

React 19のuseActionStateとでフォーム送信を書き直し、useOptimisticで送った内容をすぐ表示しました。投稿フォームの楽観的更新を、ほかのライブラリなしで書くときに使えます。エラーで入力欄が空になる落とし穴 ...