🚀 مهم‌ترین قابلیت‌های React 19 (با مثال کد)

React 19 یکی از مهم‌ترین آپدیت‌های این کتابخانه در سال‌های اخیر است.
این نسخه تمرکز زیادی روی Server Components، فرم‌ها، مدیریت async state و بهبود عملکرد دارد.

در ادامه مهم‌ترین قابلیت‌هایی که باید درباره React 19 بدانید را بررسی می‌کنیم.

1. Server Actions

یکی از مهم‌ترین قابلیت‌های React 19 معرفی Server Actions است.

این قابلیت اجازه می‌دهد بدون ساخت API جداگانه، منطق سمت سرور را مستقیماً در کامپوننت‌ها بنویسید.

مثال

"use server";

export async function createUser(formData: FormData) {
  const name = formData.get("name");

  await db.user.create({
    data: { name },
  });
}

• استفاده در فرم:

<form action={createUser}>
  <input name="name" />
  <button type="submit">Create</button>
</form>

مزایا:

• حذف بسیاری از API routeها
• ساده‌تر شدن ارتباط client و server
• کد تمیزتر

useActionState

این hook برای مدیریت state مربوط به Server Actions طراحی شده است.

"use client";

import { useActionState } from "react";

async function login(prevState: any, formData: FormData) {
  const username = formData.get("username");

  if (username !== "admin") {
    return { error: "Invalid username" };
  }

  return { success: true };
}

export default function Login() {
  const [state, formAction]
 = useActionState(login, null);

  return (
    <form action={formAction}>
      <input name="username" />
      <button type="submit">Login</button>

      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

این hook کمک می‌کند:

• error handling ساده‌تر شود
• loading state راحت‌تر مدیریت شود

useOptimistic

این hook برای Optimistic UI طراحی شده است.

یعنی قبل از اینکه سرور پاسخ بدهد، UI به صورت موقت آپدیت می‌شود.

"use client";

import { useOptimistic } from "react";

export default function Comments({ comments }) {
  const [optimisticComments, addComment]
 = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
,
  );

  async function handleSubmit(formData: FormData) {
    const comment = formData.get("comment");

    addComment({ text: comment });

    await sendComment(comment);
  }

  return (
    <>
      <form action={handleSubmit}>
        <input name="comment" />
        <button>Add</button>
      </form>

      {optimisticComments.map((c, i) => (
        <p key={i}>{c.text}</p>
      ))}
    </>
  );
}

useFormStatus

این hook برای دریافت وضعیت submit فرم استفاده می‌شود.

"use client";

import { useFormStatus } from "react-dom";

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

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

<form action={submitForm}>
  <input name="email" />
  <SubmitButton />
</form>

Asset Loading Improvements

خب React 19 مدیریت preload و preconnect را بهتر کرده است.

import { preload } from "react-dom";

preload("/fonts/inter.woff2", {
  as: "font",
});

این قابلیت باعث می‌شود:

• لود منابع سریع‌تر شود
• و performance بهتر شود

Metadata Support

و بالاخره React 19 اجازه می‌دهد متادیتای صفحه مستقیماً در کامپوننت مدیریت شود.

function Page() {
  return (
    <>
      <title>My Page</title>
      <meta name="description" content="React 19 example" />
    </>
  );
}

پس React به صورت خودکار آن‌ها را در مدیریت می‌کند.

Document Metadata Management

در React 19 مدیریت بهتر metadata در SSR و streaming دارد.

این موضوع مخصوصاً در فریمورک‌هایی مثل:

Next.js Remix بسیار مهم است.

Suspense

خب Suspense در React 19 عملکرد بهتری دارد و با async rendering بهتر کار می‌کند.

<Suspense fallback={<p>Loading...</p>}>
  <UserProfile />
</Suspense>

این موضوع باعث:

• streaming بهتر
• UX سریع‌تر

بهبود Hydration

خب React 19 مشکل‌های hydration mismatch را کاهش داده است.

نتیجه:

• خطاهای کمتر در SSR
• رندر قابل پیش‌بینی‌تر
• و performance بهتر در hydration

جمع‌بندی

پس React 19 بیشتر روی سه محور اصلی تمرکز دارد:

1️⃣ Server-first architecture

• با معرفی Server Actions

2️⃣ مدیریت بهتر فرم‌ها

با hookهایی مثل:

• useActionState
• useFormStatus

3️⃣ UX سریع‌تر

با قابلیت‌هایی مثل:

• useOptimistic
• Suspense بهینه‌تر
• asset loading بهتر

اگر از فریمورک‌هایی مثل Next.js 15 یا Next.js 16 استفاده می‌کنید، React 19 می‌تواند تجربه توسعه و performance اپلیکیشن شما را به شکل قابل توجهی بهبود دهد.