Optimistic UI Example

A todo list demonstrating optimistic UI updates. New items appear instantly while the server action runs in the background. Try typing "fail" in a todo to see automatic rollback on server error.

✅Read hookform-action docs

⬜Upgrade to React 19

⬜Add optimistic UI to my app

How It Works

optimisticData generates the predicted next state immediately when the form is submitted — before the server responds.

The UI renders optimistic.data which reflects the optimistic state, so the new todo appears instantly.

optimistic.isPending is true while the server action is still running, allowing loading indicators.

If the action throws an error, rollback() is called automatically and the optimistic state reverts.

Source Code

'use client'
import { useActionForm } from 'hookform-action'
import { addTodoAction, type Todo } from './actions'

export function OptimisticTodoForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isPending },
    optimistic,
  } = useActionForm(addTodoAction, {
    defaultValues: { text: '' },

    // ✨ v4 Optimistic UI
    optimisticKey: 'todos',
    optimisticInitial: initialTodos,
    optimisticData: (current: Todo[], values) => [
      ...current,
      { id: `temp-${Date.now()}`, text: values.text, done: false },
    ],
  })

  const todos = optimistic?.data ?? initialTodos

  return (
    <form onSubmit={handleSubmit(() => reset({ text: '' }))}>
      {todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
      <input {...register('text')} />
      <button disabled={isPending}>
        {isPending ? 'Adding...' : 'Add Todo'}
      </button>
    </form>
  )
}