React 19 Features Guide

# React 19 Features Guide for Google Antigravity

Master the latest React 19 features with Google Antigravity IDE. This comprehensive guide covers the new use hook, Server Components, Actions, form handling, optimistic updates, and the improved developer experience that React 19 brings to modern web development.

## Configuration

Configure your Antigravity environment for React 19:

```typescript
// .antigravity/react19.ts
export const reactConfig = {
  version: "19.x",
  features: {
    serverComponents: true,
    actions: true,
    useHook: true,
    compiler: true
  },
  optimization: {
    automaticMemoization: true
  }
};
```

## The use Hook

Read resources in render:

```typescript
// Using promises with use
import { use, Suspense } from "react";

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);

  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export function UserPage({ userId }: { userId: string }) {
  const userPromise = fetchUser(userId);

  return (
    <Suspense fallback={<div>Loading user...</div>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

// Using context with use
import { createContext, use } from "react";

const ThemeContext = createContext<Theme | null>(null);

function ThemedButton() {
  const theme = use(ThemeContext);
  
  if (!theme) {
    throw new Error("Must be used within ThemeProvider");
  }

  return (
    <button style={{ backgroundColor: theme.primary }}>
      Click me
    </button>
  );
}
```

## Server Actions

Define server-side mutations:

```typescript
// app/actions.ts
"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  const post = await db.post.create({
    data: { title, content }
  });

  revalidatePath("/posts");
  redirect(`/posts/${post.id}`);
}

export async function deletePost(id: string) {
  await db.post.delete({ where: { id } });
  revalidatePath("/posts");
}

export async function updatePost(id: string, formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  await db.post.update({
    where: { id },
    data: { title, content }
  });

  revalidatePath(`/posts/${id}`);
}
```

## Form Actions

Handle forms with actions:

```typescript
// components/CreatePostForm.tsx
"use client";

import { useFormStatus, useFormState } from "react-dom";
import { createPost } from "@/app/actions";

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Creating..." : "Create Post"}
    </button>
  );
}

type FormState = {
  error?: string;
  success?: boolean;
};

async function createPostAction(
  prevState: FormState,
  formData: FormData
): Promise<FormState> {
  try {
    await createPost(formData);
    return { success: true };
  } catch (error) {
    return { error: "Failed to create post" };
  }
}

export function CreatePostForm() {
  const [state, formAction] = useFormState(createPostAction, {});

  return (
    <form action={formAction}>
      {state.error && <p className="error">{state.error}</p>}
      
      <input name="title" placeholder="Title" required />
      <textarea name="content" placeholder="Content" required />
      
      <SubmitButton />
    </form>
  );
}
```

## Optimistic Updates

Show immediate feedback:

```typescript
"use client";

import { useOptimistic, startTransition } from "react";
import { likePost } from "@/app/actions";

interface Post {
  id: string;
  title: string;
  likes: number;
  isLiked: boolean;
}

export function PostCard({ post }: { post: Post }) {
  const [optimisticPost, addOptimisticLike] = useOptimistic(
    post,
    (currentPost, newLiked: boolean) => ({
      ...currentPost,
      likes: newLiked ? currentPost.likes + 1 : currentPost.likes - 1,
      isLiked: newLiked
    })
  );

  async function handleLike() {
    const newLiked = !optimisticPost.isLiked;
    
    startTransition(() => {
      addOptimisticLike(newLiked);
    });

    await likePost(post.id, newLiked);
  }

  return (
    <div className="post-card">
      <h2>{optimisticPost.title}</h2>
      <button onClick={handleLike}>
        {optimisticPost.isLiked ? "Unlike" : "Like"} ({optimisticPost.likes})
      </button>
    </div>
  );
}
```

## Document Metadata

Manage metadata in components:

```typescript
import { Metadata } from "next";

export function BlogPost({ post }: { post: Post }) {
  return (
    <>
      <title>{post.title} | My Blog</title>
      <meta name="description" content={post.excerpt} />
      <link rel="canonical" href={`https://myblog.com/posts/${post.slug}`} />
      
      <article>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
    </>
  );
}

// Or using generateMetadata
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage]
    }
  };
}
```

## Best Practices

Follow these guidelines for React 19:

1. **Use Server Components** - Default to server rendering
2. **Leverage Actions** - Server-side mutations
3. **Optimistic updates** - Immediate user feedback
4. **use hook** - Cleaner async data access
5. **Form status** - Built-in loading states
6. **Trust the compiler** - Automatic memoization

Google Antigravity IDE provides intelligent React 19 suggestions and automatic Server Component patterns.