ری‌اکت ۱۹ با معرفی ویژگی‌های جدید و بهبودهای متعددی همراه بوده است که توسعه رابط‌های کاربری را کارآمدتر و بهینه‌تر می‌کند. در ادامه، به برخی از این ویژگی‌ها همراه با مثال‌هایی می‌پردازیم:

اگر هنوز آموزش React شروع نکردی الان میتونی یادگیری شروع کنی من کمکت میکنم :

آموزش React – مبتدی تا پیشرفته

۱. کامپایلر جدید React

در نسخه ۱۹، کامپایلر جدیدی به نام React Forget معرفی شده است که به‌طور خودکار بهینه‌سازی‌های لازم را انجام می‌دهد و نیاز به استفاده دستی از هوک‌هایی مانند useMemo و useCallback را کاهش می‌دهد.

مثال:

// قبل از React 19
import { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    // منطق کلیک
  }, [onClick]);

  return <button onClick={handleClick}>کلیک کنید</button>;
}

// در React 19 با کامپایلر جدید
function MyComponent({ onClick }) {
  function handleClick() {
    // منطق کلیک
  }

  return <button onClick={handleClick}>کلیک کنید</button>;
}

۲. کامپوننت‌های سمت سرور (Server Components)

این ویژگی امکان رندر کامپوننت‌ها در سمت سرور را فراهم می‌کند که منجر به بهبود سئو و عملکرد برنامه می‌شود.

مثال:

// تعریف یک کامپوننت سمت سرور
'use server';

export default async function ServerComponent() {
  const data = await fetchData();
  return <div>{data}</div>;
}

۳. اکشن‌ها (Actions)

اکشن‌ها امکان مدیریت تعاملات با فرم‌ها و عناصر DOM را به‌صورت بهینه‌تری فراهم می‌کنند.

مثال:

// تعریف یک اکشن در سمت سرور
'use server';

export default async function submitData(formData) {
  const username = formData.get('username');
  // پردازش داده‌ها
  return 'موفقیت‌آمیز';
}

// استفاده در فرم
function MyForm() {
  return (
    <form action={submitData}>
      <input name="username" />
      <button type="submit">ارسال</button>
    </form>
  );
}

۴. مدیریت متادیتاهای سند (Document Metadata)

این ویژگی امکان تعریف مستقیم تگ‌های متا و عنوان صفحه را در کامپوننت‌ها فراهم می‌کند که به بهبود سئو کمک می‌کند.

مثال:

function MyPage() {
  return (
    <>
      <title>عنوان صفحه</title>
      <meta name="description" content="توضیحات صفحه" />
      {/* محتوای صفحه */}
    </>
  );
}

۵. بارگذاری منابع (Asset Loading)

این قابلیت امکان بارگذاری غیرهمزمان منابعی مانند تصاویر و استایل‌ها را فراهم می‌کند که منجر به بهبود سرعت لود صفحات می‌شود.

مثال:

// استفاده از بارگذاری غیرهمزمان تصاویر
function MyComponent() {
  return (
    <img
      src="image.jpg"
      loading="lazy"
      alt="توضیحات تصویر"
    />
  );
}

۶. پشتیبانی از وب کامپوننت‌ها (Web Components)

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

مثال:

// استفاده از یک وب کامپوننت سفارشی
function MyComponent() {
  return <my-web-component></my-web-component>;
}

۷. هوک‌های پیشرفته

هوک‌های جدیدی مانند useOptimistic و use معرفی شده‌اند که مدیریت وضعیت و داده‌ها را ساده‌تر می‌کنند.

مثال:

import { use } from 'react';

function MyComponent({ dataPromise }) {
  const data = use(dataPromise);
  return <div>{data}</div>;
}

این ویژگی‌ها و بهبودها در ری‌اکت ۱۹ توسعه‌دهندگان را قادر می‌سازد تا برنامه‌های کارآمدتر و بهینه‌تری ایجاد کنند.