import { router } from '@inertiajs/react'

type Post = {
  id: number
  likes: number
  liked_by_me: boolean
}

export function LikeButton({ post }: { post: Post }) {
  const like = () => {
    router
      .optimistic((props: { post: Post }) => ({
        post: {
          ...props.post,
          likes: props.post.likes + (props.post.liked_by_me ? -1 : 1),
          liked_by_me: !props.post.liked_by_me,
        },
      }))
      .post(`/posts/${post.id}/like`, {}, { preserveScroll: true })
  }

  return <button onClick={like}>{post.liked_by_me ? 'Bỏ thích' : 'Thích'} · {post.likes}</button>
}

import { useForm } from '@inertiajs/react'

export default function TodoComposer({ todos }) {
  const form = useForm({ title: '' })

  const submit = (event: React.FormEvent) => {
    event.preventDefault()

    form
      .optimistic((props) => ({
        todos: [
          ...props.todos,
          { id: `temp-${Date.now()}`, title: form.data.title, done: false },
        ],
      }))
      .post('/todos', {
        onSuccess: () => form.reset(),
      })
  }

  return (
    <form onSubmit={submit}>
      <input value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} />
      <button disabled={form.processing}>Thêm</button>
    </form>
  )
}

router.patch(
    route('products.toggle', product.id),
    {},
    {
        optimistic: {
            props: (current) => ({
                products: toggleProductInPaginator(current.products, product.id),
            }),
        },
        onSuccess: () => {
            router.reload({ only: ['stats'] })
        },
    },
)

requested quantity = 2
available quantity = 1
concurrent reservation đang chạy

form.post(route('orders.reserve'), {
    onStart: () => setPending(true),
    onFinish: () => setPending(false),
})

<button disabled={processing} onClick={submit}>
    {processing ? 'Đang xử lý…' : 'Xác nhận'}
</button>

1. UI đổi ngay trước server response
2. success -> state canonical được giữ/reconcile
3. failure -> UI rollback + user nhận feedback