Async React時代の宣言的UI 3: useActionStateでユーザーの操作を妨げないUXを作る

useActionStateは、React 19で導入された新しいフックです。 その挙動を見ると、非同期版useReducerと言えるような挙動をします。 ただ、筆者は最近、このフックの真髄はユーザーの操作を妨げないUXを作ることにあるのではないかと考えています。ReactはUIライブラリであり、そのゴールは「良いUX」であるように思います。 そこで、この記事では、useActionStateがどのようなUXを実現するのに役立つのか、という観点で解説していきます。 useActionStateのインターフェース まずuseActionStateのインターフェースを見ましょう。ドキュメントによると、インターフェースはこうなっています。 const [state, dispatchAction, isPending] = useActionState(reducerAction, initia

[nguyen-oi]

処理中ボタン無効化でお茶を濁さず、楽観的更新とキューをReact標準で綺麗に組めるのは夢がある。UXの設計思想として面白い

[mkusaka]

React19のuseActionStateを非同期useReducer的に解説し、キューイング＋useOptimisticで操作を妨げないUXを実装例付きで紹介。

[jay-es]

useActionState はアクションがキューイングされる。dispatchAction を 2 回呼び出すと前の処理が終わってから次が実行される。楽観的更新と組み合わせユーザーの操作を妨げない UI を作れる。useTransition はキューイングなし