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

タブの切り替えで表示中の画面がSuspenseの「読み込み中…」に置き換わるのは、startTransitionで防げます。isPendingで切り替え中を示す方法、入れ子のSuspenseで待つ範囲を決める方法、keyで読み込み中に ...

React 19のに渡した関数は、FormDataを受け取って呼ばれます。useFormStatusで子のボタンから送信中を読む方法と、同じコンポーネントで呼ぶと効かない落とし穴を確かめました。

条件付きレンダリングの代わりにで隠すと、stateも入力欄の中身も残ったまま、エフェクトだけが片付けられます。2つの書き方を同じ手順で動かして比べ、隠しても止まらないへの対処も確かめました。

React 19では ref をふつうの props として受け取れるので、新しいコンポーネントに forwardRef はいりません。同じコードを React 18 と 19 で動かし、memo や TypeScript の型での違 ...

React 19のuseなら、Promiseとコンテキストを描画中に読めます。待ち時間はSuspense、失敗はError Boundaryに任せられ、コンテキストはifのあとでも読めます。キャッシュしないPromiseを渡すとどうな ...

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

useEffectEventを使うと、エフェクトの中で最新のpropsやstateを読みながら、その値が変わってもエフェクトをやり直さずに済みます。依存配列に入れる、lintを黙らせる、useEffectEventを使う、の3通りで、 ...

React Compiler 1.0を入れると、useMemoとuseCallbackはほとんどの場面で書かなくてよくなります。ただしコンパイラが処理をスキップしたコンポーネントや、エフェクトの依存値を細かく制御したい場面では、今も手 ...