使用 useOptimistic 让你的应用感觉即时响应

import * as React from 'react'

function LikeButton({
  initialCount,
  sendLike,
}: {
  initialCount: number
  sendLike: () => Promise<void>
}) {
  const [isPending, startTransition] = React.useTransition()
  const [count, setCount] = React.useState(initialCount)

  // The update function adds the optimistic delta to the count
  const [optimisticCount, addOptimisticLike] = React.useOptimistic(
    count,
    (current, delta) => current + delta,
  )

  function handleLike() {
    // Optimistically increment the count
    addOptimisticLike(1)

    // Actually send to the server using the provided async function
    startTransition(async () => {
      await sendLike()
      setCount((c) => c + 1)
    })
  }

  return <button onClick={handleLike} disabled={isPending}>👍 {optimisticCount}</button>
}

import * as React from 'react'

type Comment = {
  id: number
  text: string
}

function CommentSection({
  initialComments,
  sendComment,
}: {
  initialComments: Comment[]
  sendComment: (text: string) => Promise<Comment>
}) {
  const [comments, setComments] = React.useState(initialComments)
  const [isPending, startTransition] = React.useTransition()

  // The update function merges the optimistic comment into the list
  const [optimisticComments, addOptimisticComment] = React.useOptimistic(
    comments,
    (currentComments, newComment) => [
      { ...newComment, optimistic: true },
      ...currentComments,
    ],
  )

  async function handleAddComment(text: string) {
    // Show the comment immediately
    addOptimisticComment({ id: Date.now(), text })

    // Actually send to the server using the provided async function
    startTransition(async () => {
      const savedComment = await sendComment(text)
      setComments((prev) => [{ ...savedComment }, ...prev])
    })
  }

  return (
    <fieldset disabled={isPending}>
      <form
        action={async (formData) => {
          handleAddComment(formData.get('text'))
        }}
      >
        <input name="text" placeholder="Write a comment..." />
        <button type="submit">Add</button>
      </form>
      <ul>
        {optimisticComments.map((comment) => (
          <li
            key={comment.id}
            className={comment.optimistic ? 'text-neutral-500' : ''}
          >
            {comment.text}
          </li>
        ))}
      </ul>
    </fieldset>
  )
}

import * as React from 'react'
import { reserveSeat, processPayment, sendConfirmation } from './api'

function BookFlight() {
  const [message, setMessage] = React.useOptimistic('Ready to book')

  async function handleBooking(formData: FormData) {
    setMessage('Reserving seat...')
    await reserveSeat(formData.get('flight'))

    setMessage('Processing payment...')
    await processPayment(formData.get('passenger'))

    setMessage('Sending confirmation...')
    const bookingId = await sendConfirmation(
      formData.get('passenger'),
      formData.get('flight'),
    )

    setMessage('Booking complete! Redirecting...')
    // In a real app, you'd use your routing library here
    console.log(`Redirecting to /booking/${bookingId}`)
  }

  return (
    <form action={handleBooking}>
      <input name="passenger" placeholder="Passenger Name" required />
      <input name="flight" placeholder="Flight Number" required />
      <button type="submit">Book Flight</button>
      <div className="mt-2">
        <strong>Status:</strong> {message}
      </div>
    </form>
  )
}