latest-react
Latest React features from React 19 and React Compiler (past 1.5 years - mid 2024 to 2026)
What this skill does
# 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
- [React v19 Official Announcement](https://react.dev/blog/2024/12/05/react-19)
- [React Versions](https://react.dev/versions)
- [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
- [React 19.2 Release](https://react.dev/blog/2025/10/01/react-19-2)
## 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 guidRelated in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.