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

BRANK

useActionStateは、React 19で導入された新しいフックです。その挙動を見ると、非同期版useReducerと言えるような挙動をします。ただ、筆者は最近、このフックの真髄はユーザーの操作を妨げないUXを作ることにあるのではないかと考えています。ReactはUIライブラリであり、そのゴールは「良いUX」であるように思います。そこで、この記事では、useActionStateがどのようなUXを実現するのに役立つのか、という観点で解説していきます。useActionStateのインターフェースまずuseActionStateのインターフェースを見ましょう。ドキュメントによると、インターフェースはこうなっています。const [state, dispatchAction, isPending] = useActionState(reducerAction, initialState, permalink?); 確かにreducerとかdispatchといった語彙が見えるので、useReducerに近いもののようです。違うところは、reducerActionは非同期関数でもよく、副作用があってもよいという点です。実際、公式ドキュメントのuseActionStateの説明は以下のようになっています。useActionState は、アクション (Action) を使って副作用を伴う state 更新を行うための React フックです。「副作用を伴うst…