Imported from majiayu000/claude-skill-registry-data (data/latest-react/SKILL.md). Install upstream with npx skills add majiayu000/claude-skill-registry-data --skill latest-react. Copyright stays with the author.

Latest React Skill

Comprehensive knowledge of React features released from mid-2024 through 2026, focusing on React 19 (released December 2024, latest v19.2+), React Compiler (RC April 2025), and supporting ecosystem changes.

Official Resources

Major Features by Category

1. New Hooks (React 19)

`useActionState`

Manages state for asynchronous actions, particularly useful for form submissions and mutations.

import { useActionState } from "react";

async function submitForm(prevState, formData) {
  // Handle form submission
  const result = await submitToAPI(formData);
  return { success: true, message: "Submitted!" };
}

function MyForm() {
  const [state, formAction, isPending] = useActionState(submitForm, null);

  return (
    <form action={formAction}>
      <input name="email" />
      <button type="submit" disabled={isPending}>
        {isPending ? "Submitting..." : "Submit"}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

Use cases: Form submissions, mutations, any async action that needs pending/error states

`useOptimistic`

Handles optimistic UI updates while waiting for async operations to complete.

import { useOptimistic } from "react";

function LikeButton({ postId, initialLikes }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (state, newLike) => state + newLike
  );

  async function handleLike() {
    addOptimisticLike(1);
    await updateLikes(postId);
  }

  return <button onClick={handleLike}>{optimisticLikes} likes</button>;
}

Use cases: Like buttons, todo lists, any UI that can show predicted state

`useFormStatus`

Accesses parent form submission status from within a child component.

import { useFormStatus } from "react";

function SubmitButton() {
  const { pending, data, method, action } = useFormStatus();

  return (
    <button disabled={pending}>{pending ? "Submitting..." : "Submit"}</button>
  );
}

function MyForm() {
  return (
    <form action={submitAction}>
      <input name="field" />
      <SubmitButton />
    </form>
  );
}

Use cases: Form submit buttons, progress indicators, child components that need form state

2. Actions & Async Transitions

React 19 adds support for using async functions directly in transitions.

import { useTransition } from "react";

function SearchComponent() {
  const [isPending, startTransition] = useTransition();

  function handleSearch(query: string) {
    startTransition(async () => {
      // Automatic pending state, error handling, and optimistic updates
      await searchAPI(query);
    });
  }

  return <input onChange={(e) => handleSearch(e.target.value)} />;
}

Key capabilities:

Automatic pending state management
Built-in error handling
Support for optimistic updates
Non-blocking UI updates

3. API Simplifications

Context Providers - No More `.Provider`

Before React 19:

<MyContext.Provider value={someValue}>{children}</MyContext.Provider>

React 19+:

<MyContext value={someValue}>{children}</MyContext>

Ref as a Prop - No More `forwardRef`

Before React 19:

const MyButton = forwardRef((props, ref) => {
  return <button ref={ref} {...props} />;
});

React 19+:

const MyButton = ({ ref, ...props }) => {
  return <button ref={ref} {...props} />;
};

The ref prop is now a standard prop that can be passed directly to function components.

4. Document Metadata Support

React 19 introduces native support for document metadata. You can now place <title>, <meta>, and <link> tags directly in components, and React automatically "hoists" them to the <head> section.

function BlogPost({ title, description }) {
  return (
    <>
      <title>{title} | My Blog</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <link rel="canonical" href={`https://example.com/blog/${slug}`} />

      <article>
        <h1>{title}</h1>
        {/* Post content */}
      </article>
    </>
  );
}

Benefits:

No more third-party libraries needed for SEO metadata
Works from nested components
Automatic deduplication
Server-side rendering support

5. Enhanced Ref Callbacks

Ref callbacks can now return cleanup functions that run when the component unmounts.

function MyComponent() {
  const buttonRef = useCallback((element: HTMLButtonElement | null) => {
    if (!element) return; // cleanup on unmount

    const handler = () => console.log("Clicked!");
    element.addEventListener("click", handler);

    // Cleanup function
    return () => {
      element.removeEventListener("click", handler);
    };
  }, []);

  return <button ref={buttonRef}>Click me</button>;
}

6. Server Functions (formerly Server Actions)

As of September 2024, "Server Actions" were renamed to Server Functions. They integrate with Server Components and work seamlessly with <Suspense>.

// Server Component
"use server";

export async function createUser(formData: FormData) {
  const user = await db.users.create({
    email: formData.get("email"),
  });
  return user;
}

// Client Component usage
import { createUser } from "./actions";

function UserForm() {
  return (
    <form action={createUser}>
      <input name="email" />
      <button type="submit">Create User</button>
    </form>
  );
}

7. Custom Elements Support

React 19 now has full support for Custom Elements (Web Components), addressing previous limitations with attribute handling and event propagation.

8. Hydration Improvements

Graceful DOM mismatch handling: Better handling of unexpected DOM changes from third-party scripts
Enhanced error messages: More detailed hydration error diffs
Consolidated error logging: Single error containing all information instead of multiple console errors

9. New Error Callbacks

React 19 introduces new error handling callbacks at the root:

createRoot(document.getElementById("root")!, {
  onCaughtError: (error, errorInfo) => {
    // Errors caught by Error Boundaries
    console.error("Caught error:", error, errorInfo);
  },
  onUncaughtError: (error, errorInfo) => {
    // Errors NOT caught by Error Boundaries
    console.error("Uncaught error:", error, errorInfo);
  },
});

10. Resource Preloading & Stylesheet Management

Native support for managing resource loading priorities:

function Page() {
  return (
    <>
      <link rel="preload" href="/styles.css" as="style" />
      <link rel="stylesheet" href="/styles.css" />
    </>
  );
}

11. React Compiler (RC - April 2025)

The React Compiler is now feature-complete and production-ready.

Key capabilities:

Automatic memoization: Eliminates need for manual useMemo and useCallback
Enhanced debugging: New tools including Owner Stack
Performance optimization: Automatic detection and optimization of re-renders

Before Compiler:

const memoizedValue = useMemo(() => expensiveCalc(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

With Compiler:

// Compiler automatically optimizes - no hooks needed
const value = expensiveCalc(a, b);
const callback = () => doSomething(a, b);

12. Strict Mode Changes (React 19)

React 19 includes fixes to Strict Mode behavior:

useEffect double execution fixed: No more double API calls in development
Better useMemo/useCallback behavior: Improved behavior during double rendering
Clearer migration path: Better guidance for Strict Mode issues

13. Enhanced Suspense Support

Improved Suspense integration with Server Components and Server Functions:

<Suspense fallback={<Loading />}>
  <AsyncComponent />
</Suspense>

Streaming and loading states are now core features of React Server Components + Suspense.

Migration Guide

Upgrading to React 19

Remove deprecated APIs:
- Replace React.PropTypes with prop-types package
- Remove ReactDOM.render - use createRoot
- Remove UNSAFE_ lifecycle methods
Simplify components:
- Remove forwardRef wrappers
- Update Context providers to new syntax
- Replace manual memoization where Compiler is used
Update forms:
- Consider using useActionState for form submissions
- Use useFormStatus in child components
- Leverage Actions for async transitions
Error handling:
- Add onCaughtError and onUncaughtError callbacks
- Update Error Boundaries for better error info

Best Practices (2025+)

Prefer new hooks: Use useActionState, useOptimistic, and useFormStatus for forms and async actions
Simplify with Compiler: Let React Compiler handle memoization instead of manual useMemo/useCallback
Use native metadata: Place <title>, <meta>, <link> directly in components instead of third-party libraries
Leverage Server Functions: Use Server Functions for mutations and data fetching when possible
Utilize Actions: Use async transitions with automatic error/pending state management
Remove boilerplate: Take advantage of the new simplified APIs (no forwardRef, no .Provider)

Common Patterns (2025 Style)

Form with Loading State

function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, null);

  return (
    <form action={formAction}>
      <input name="email" disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? "Sending..." : "Send"}
      </button>
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">{state.success}</p>}
    </form>
  );
}

Optimistic List Updates

function TodoList({ initialTodos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    initialTodos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(text: string) {
    addOptimisticTodo({ id: Date.now(), text, pending: true });
    await api.addTodo(text);
  }

  return (
    <ul>
      {optimisticTodos.map((todo) => (
        <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Document Metadata by Route

function BlogPostPage({ slug }) {
  const post = use(fetchPost(slug));

  if (!post) return null;

  return (
    <>
      <title>{post.title} | My Blog</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.image} />

      <article>{post.content}</article>
    </>
  );
}

latest-react

About

Latest React Skill

Official Resources

Major Features by Category

1. New Hooks (React 19)

`useActionState`

`useOptimistic`

`useFormStatus`

2. Actions & Async Transitions

3. API Simplifications

Context Providers - No More `.Provider`

Ref as a Prop - No More `forwardRef`

4. Document Metadata Support

5. Enhanced Ref Callbacks

6. Server Functions (formerly Server Actions)

7. Custom Elements Support

8. Hydration Improvements

9. New Error Callbacks

10. Resource Preloading & Stylesheet Management

11. React Compiler (RC - April 2025)

12. Strict Mode Changes (React 19)

13. Enhanced Suspense Support

Migration Guide

Upgrading to React 19

Best Practices (2025+)

Common Patterns (2025 Style)

Form with Loading State

Optimistic List Updates

Document Metadata by Route

Ecosystem Considerations

Next.js Integration

Testing

TypeScript Support

Sources & Further Reading

Use it

Manifest

Reviews

About

Latest React Skill

Official Resources

Major Features by Category

1. New Hooks (React 19)

useActionState

useOptimistic

useFormStatus

2. Actions & Async Transitions

3. API Simplifications

Context Providers - No More .Provider

Ref as a Prop - No More forwardRef

4. Document Metadata Support

5. Enhanced Ref Callbacks

6. Server Functions (formerly Server Actions)

7. Custom Elements Support

8. Hydration Improvements

9. New Error Callbacks

10. Resource Preloading & Stylesheet Management

11. React Compiler (RC - April 2025)

12. Strict Mode Changes (React 19)

13. Enhanced Suspense Support

Migration Guide

Upgrading to React 19

Best Practices (2025+)

Common Patterns (2025 Style)

Form with Loading State

Optimistic List Updates

Document Metadata by Route

Ecosystem Considerations

Next.js Integration

Testing

TypeScript Support

Sources & Further Reading

Use it

Manifest

Reviews

`useActionState`

`useOptimistic`

`useFormStatus`

Context Providers - No More `.Provider`

Ref as a Prop - No More `forwardRef`