useOptimistic

from Server Actions

Optimistic UIを実現するやつ

docs

code:ts

const optimisticState, addOptimistic = useOptimistic(state, updateFn);

addOptimisticはActionsの中で呼ぶ

例

code:ts

function ChangeName({currentName, onUpdateName}) {

const optimisticName, setOptimisticName = useOptimistic(currentName); //

const submitAction = async formData => {

const newName = formData.get("name");

setOptimisticName(newName); // 楽観的に更新

const updatedName = await updateName(newName);

onUpdateName(updatedName);

};

return (

<p>Your name is: {optimisticName}</p> //

<p>

<label>Change Name:</label>

<input

type="text"

name="name"

disabled={currentName !== optimisticName} //

</p>

</form>

);

}

setOptimisticNameで楽観的に更新する

更新終了かエラー発生で、直ちにcurrentNameに戻る

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

#wip

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#experimental-useoptimistic

https://azukiazusa.dev/blog/nextjs-server-action/#useoptimistic-を使用して楽観的更新を実現する

楽観的更新がされている気がしないmrsekut.icon

なんか使い方間違ってる #??

code:ts

const Counter: React.FC = () => {

const count, increment, isPending = useActionState(async (currentCount) => {

addOptimistic(1);

await sleep(1000)

return currentCount + 1;

}, 0);

const displayCount, addOptimistic = useOptimistic(count, (currentCount, optimisticValue: number) => {

return currentCount + optimisticValue;

});

return (

<div>

<div>{displayCount}</div>

<button

type="button"

onClick={increment}

disabled={isPending}

Increment

</button>

</div>

);

}

docs内のform actionを使った例だと機能した