useActionState

from Actions

useTransition + useReducerのようなイメージ

非同期処理が絡む状態を扱う時に使う

docs

code:ts

const state, formAction, isPending = useActionState(fn, initialState, permalink?);

例

code:ts

// 非同期reducerのようなもの

// prevStateを取って、状態を更新する

async function increment(previousState, formData) {

return previousState + 1;

}

function StatefulForm({}) {

const state, formAction, isPending = useActionState(increment, 0);

return (

<form>

{state}

<button formAction={formAction}>Increment</button>

</form>

)

}

formActionは、dispatch関数のようなもの

例

submit系とかでは、errorをstateとして返すのが一種のパターンとなってるぽい

code:ts

const error, submitAction, isPending = useActionState(

async (previousState, newName) => {

const error = await updateName(newName);

if (error) return error;

return null;

null,

);

使い所

更新系の処理に関連したstate更新がある時

state更新に非同期処理が必要な時

useActionState｜React 19の新機能まるわかり

#wip

ちなみに、useActionStateはアクションが並列に実行されないような制御が組み込まれています。incrementを連打した場合、アクションがキューイングされ、前の実行が完了してから次の実行が開始します。このような制御がuseTransitionには無く、useActionStateに特有のものです。これは、ステート管理が組み込まれている以上、競合状態を避ける仕組みが必要だからでしょう。 ref