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.

tsx

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.

tsx

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.

tsx

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.

tsx

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:

tsx

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

React 19+:

tsx

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

Ref as a Prop - No More `forwardRef`

Before React 19:

tsx

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

React 19+:

tsx

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.

tsx

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.

tsx

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>.

tsx

// 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:

tsx

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:

tsx

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:

tsx

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

With Compiler:

tsx

// 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:

tsx

<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

tsx

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

tsx

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

tsx

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>
    </>
  );
}

Search AI Tools

latest-react

Install this agent skill to your Project

SKILL.md

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

Search AI Tools

Install this agent skill to your Project

SKILL.md

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

`useActionState`

`useOptimistic`

`useFormStatus`

Context Providers - No More `.Provider`

Ref as a Prop - No More `forwardRef`