القائمة
Latest React features from React 19 and React Compiler (past 1.5 years - mid 2024 to 2026)
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | latest-react |
| description | Latest React features from React 19 and React Compiler (past 1.5 years - mid 2024 to 2026) |
| updated | "2026-01-11T00:00:00.000Z" |
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.
useActionStateManages 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
useOptimisticHandles 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
useFormStatusAccesses 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
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:
.ProviderBefore React 19:
<MyContext.Provider value={someValue}>{children}</MyContext.Provider>
React 19+:
<MyContext value={someValue}>{children}</MyContext>
forwardRefBefore 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.
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:
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>;
}
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>
);
}
React 19 now has full support for Custom Elements (Web Components), addressing previous limitations with attribute handling and event propagation.
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);
},
});
Native support for managing resource loading priorities:
function Page() {
return (
<>
<link rel="preload" href="/styles.css" as="style" />
<link rel="stylesheet" href="/styles.css" />
</>
);
}
The React Compiler is now feature-complete and production-ready.
Key capabilities:
useMemo and useCallbackBefore 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);
React 19 includes fixes to Strict Mode behavior:
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.
Remove deprecated APIs:
React.PropTypes with prop-types packageReactDOM.render - use createRootUNSAFE_ lifecycle methodsSimplify components:
forwardRef wrappersUpdate forms:
useActionState for form submissionsuseFormStatus in child componentsError handling:
onCaughtError and onUncaughtError callbacksPrefer 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)
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>
);
}
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>
);
}
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>
</>
);
}
@types/react availableInitial Convex workspace setup in Coder workspaces with self-hosted Convex deployment, authentication configuration, Docker setup, and environment variable generation
Self-hosted Convex development in Coder workspaces with authentication, queries, mutations, React integration, and environment configuration
Guides self-hosted Convex deployment, authentication setup, environment configuration, troubleshooting, and production deployment considerations.
Coder workspace environment for hahomelabs.com deployments. Includes networking, ports, convex config, nhost config
Manages git operations including commits, pull requests, merge requests, and branching. Use when creating commits, handling git conflicts, managing branches, or reviewing git history. Enforces clean commit messages without author attribution.
Refactors Claude Code skills to reduce token usage 80-95% using Progressive Disclosure Architecture (PDA). Splits monolithic skills into orchestrator + reference files, extracts scripts, creates reference/ directories. Use when optimizing skills, improving skill efficiency, refactoring large/bloated skills, reducing token costs, applying PDA, modularizing skills, breaking down skills, or converting encyclopedia-style skills to orchestrator pattern.