react-19

# React 19 Core Features

## New Hooks

### use() Hook

Read resources (promises, context) in render.

```typescript
import { use, Suspense } from 'react'

function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  // Suspends until promise resolves
  const comments = use(commentsPromise)

  return comments.map(comment => <p key={comment.id}>{comment.text}</p>)
}

// Usage with Suspense
function Page() {
  const commentsPromise = fetchComments()
  return (
    <Suspense fallback={<Loading />}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}
```

### useOptimistic

Optimistic UI updates during async operations.

```typescript
import { useOptimistic } from 'react'

function ChangeName({ currentName, onUpdateName }: Props) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName)

  const submitAction = async (formData: FormData) => {
    const newName = formData.get('name') as string
    setOptimisticName(newName) // Immediate UI update
    const updatedName = await updateName(newName)
    onUpdateName(updatedName)
  }

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Update</button>
    </form>
  )
}
```

### useActionState

Handle form Actions with state management.

```typescript
import { useActionState } from 'react'

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState: string | null, formData: FormData) => {
      const error = await updateName(formData.get('name') as string)
      if (error) return error
      redirect('/success')
      return null
    },
    null
  )

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Updating...' : 'Update'}
      </button>
      {error && <p className="text-red-500">{error}</p>}
    </form>