use, useActionState, useFormStatus & useOptimistic in React

// === use() - read a promise/context inside a component ===
import { use, Suspense } from 'react'

function UserName({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise)        // Suspends until resolved
  return <p>Hello, {user.name}</p>
}

// Wrap with Suspense
<Suspense fallback={<p>Loading...</p>}>
  <UserName userPromise={fetchUser()} />
</Suspense>

// === useActionState - form/action state + pending flag ===
import { useActionState } from 'react'

async function submitAction(prev: State, formData: FormData) {
  const name = formData.get('name')
  // ... server call ...
  return { ok: true, name }
}

function MyForm() {
  const [state, formAction, isPending] = useActionState(submitAction, { ok: false })
  return (
    <form action={formAction}>
      <input name="name" />
      <button disabled={isPending}>{isPending ? 'Saving...' : 'Save'}</button>
    </form>
  )
}

// === useFormStatus - pending state of the enclosing <form> ===
import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()    // Reads parent <form>
  return <button disabled={pending}>{pending ? 'Sending...' : 'Submit'}</button>
}

// === useOptimistic - instant UI while async work runs ===
import { useOptimistic } from 'react'

function Likes({ count, like }: { count: number; like: () => Promise<void> }) {
  const [optimisticCount, addOptimistic] = useOptimistic(
    count,
    (current, _: void) => current + 1,
  )
  return (
    <button onClick={async () => { addOptimistic(); await like() }}>
      👍 {optimisticCount}
    </button>
  )
}