بلاخره ری اکت 19 منتشر شد! هرچیزی که باید از تغییرات React 19 بدونیم!

10 فروردین 1403
ارسال شده توسط
ری اکت
ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

بلاخره ری اکت 19 منتشر شد 🙂 این بروزرسانی رو اصلا دست کم نگیرید چون یک عالمه قابلیت ها و ویژگی های جدید و مفید به ری اکت اضافه شده! اگه React Developer هستید اکیدا پیشنهاد میکنم چند دقیقه وقت بزارید و این مقاله رو مطالعه کنید تا باهمدیگه با تغییرات شگفت انگیز ری اکت 19 آشنا بشیم 🙂

پیش نیاز این مقاله

ما تو این مقاله میخوایم صرفا درمورد ری اکت 19 ( بروزرسانی جدید React ) صحبت کنیم پس اگه با خود ری اکت آشنا نیستید پیشنهاد میکنم مقاله کتابخانه ری اکت رو مطالعه کنید تا با این کتابخانه جذاب و دوست داشتنی کمی آشنایی داشته باشید.

ری اکت 19 🔥

بلاخره داکیومنت رسمی ریکت طی یک اطلاعیه از ویژگی های جذاب ری اکت 19 پرده برداشت! تو این مقاله ما تمام ویژگی های جدید ری اکت 19 رو باهمدیگه بررسی میکنیم.

همین چند روز پیش ری اکت 19 تو npm منتشر شد و از این به بعد قابل استفادست!

اما تا قبل از این، توسعه دهنده های اصلی ری اکت هر ازگاهی یک توییت منتشر میکردن و از تغییرات React 19 یکم لو میدادن 🙂 مثل توییت زیر :

Andrew Clark

خب دیگه بریم ببینیم لیست این تغییرات چیا هستن ..

ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

لیست تغییرات ری اکت 19 بصورت زیر هست :

کامپایلر ری اکت :

تو نسخه جدید ری اکت، یک کامپایلر به اسم React Forget به ری اکت اضافه شده که یکی از مهمترین تغییرات این نسخه از ری اکت نسبت به گذشته هست! در حال حاضر اینستاگرام داره از این فناوری ( کامپایلر ری اکت ) استفاده میکنه و ماهم به لیست مشتریاش اضافه شدیم 🙂

کامپوننت سمت سرور :

بلاخره ری اکت ویژگی سرور کامپوننت ( Server Component ) رو معرفی کرد و ما میتونیم کامپوننت های سمت سرور داشته باشیم! اگه با Next.js کار کرده باشید، خبر دارید که میتونیم کامپوننت های سمت سرور یا سمت کلاینت داشته باشیم و این فوق العاده هست!

خبر خوب اینکه از نسخه 19 ری اکت دیگه میتونیم Server Component داشته باشیم و کامپوننت های خودمون رو سمت سرور Render کنیم.

تحول Action ها :

تو این نسخه از ری اکت، Action ها نیز تغییرات زیادی داشتن. این یعنی نحوه تعامل ما با DOM خیلی متفاوت تر شده.

امکان استفاده از Metadata ها :

اگه با سئو آشنا باشید، خبر دارید که ما باید برای صفحات خودمون تگ Metadata مشخص کنیم. تا قبل از React 19 انجام این کار خیلی ساده نبود اما به لطف کامپونت Metadata که تو ری اکت 19 اضافه شده خیلی سریعتر و بهینه تر میتونیم اینکار رو انجام بدیم.

بارگذاری بهینه Assets های پروژه:

تو این نسخه، Assets های پروژه ما ( مثل عکس ها، فونت و .. ) در پشت صحنه بارگذاری میشن و این باعث میشه لود صفحات ما خیلی سریعتر بشه و همچنین UX ( تجربه کاربری ) بهتری داشته باشیم.

وب کامپوننت ها :

وب کامپوننت یکی از جذاب ترین ویژگی های ری اکت 19 هست که به ما اجازه میده از اجزای وب در ری اکت استفاده کنیم. ( در ادامه بیشتر راجبش صحبت میکنیم )

قدرتمند تر شدن هوک ها :

تو این نسخه هوک های خفن و قدرتمند جدیدی معرفی شدن که به ما React Developer ها کمک میکنن از کد زدن بیشتر از قبل لذت ببریم 🙂

رفع مشکل re-render های اضافه :

تیم فنی ری اکت زمان خیلی زیادی رو صرف کردن تا مشکل همیشگی ری اکت ( re-render های اضافه و بیهوده ) رو رفع کنن. خبر خوب اینکه این مشکل تو نسخه جدید رفع شده و دیگه خبری از re-render های بیهوده و اضافه نیست.

همونطور که میدونیم تا به امروز برای جلوگیری از re-render های اضافه باید از تکنیک هایی مثل هوک useMemo یا هوک useCallback استفاده میکردیم. اما تو React 19 دیگه نیاز به هیچ هوک یا پروسه دستی برای رفع re-Render اضافی نیست و خود ری اکت جلوی رندر مجدد بیهوده رو میگیره!

اگه لیست تغییرات بالا برای شماهم جذاب بوده، بیاید تک تک ویژگی های بالارو بصورت تخصصی و جزئی تر بررسی کنیم 🙂

ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

 

1 – کامپایلر ری اکت چیست ؟

تا قبل از ری اکت 19، کامپوننت های ما با تغییر State بصورت خودکار re-render میشدن! ما برای جلوگیری از re-render های اضافی باید از useMemo، useCallback یا memo استفاده میکردیم که این خیلی خسته کننده و زمانبر بود!

همچنین استفاده از useCallback, memo و useMemo پیچیدگی کد رو بالا میبرد!

خوشبختانه اعضای تیم فنی ری اکت متوجه این قضیه شدن و تصمیم گرفتن برای جلوگیری از این پروسه خسته کننده و زمانبر، کامپایلر React رو معرفی کنن! کامپایلر ری اکت خودش تصمیم میگیره که چه زمانی و به چه صورت کامپوننت مارو re-render کنه. این یعنی خودش تصمیم میگیره چه زمانی State رو آپدیت کنه و UI رو بروزرسانی کنه.

این یعنی ما React Developer ها خیلی راحت تریم و دیگه نیازی به استفاده از memo,useMemo و useCallback نداریم چون خود ری اکت 19 در پشت صحنه این موارد رو لحاظ میکنه 🙂

اسم کامپایلر ری اکت React Forget هست 🙂 ( حتما در آینده خیلی بیشتر در موردش میشنویم )

نکته ای که باید بدونیم این هست که از نسخه 19 به بعد ری اکت از کامپایلر خودش استفاده میکنه و تصمیم میگیره که چه زمانی و کدام کامپوننت رو re-render کنه تا اپیکیشن بهینه تری داشته باشیم.

البته همونطور که اشاره کردیم، کامپایلر ری اکت ( React Forget ) همین الان داره توسط Instagram استفاده میشه 🙂

سرور کامپوننت در ری اکت - کامپوننت سمت سرور React

2 – سرور کامپوننت ( Server Components )

کامپوننت های سمت سرور یکی از جذاب ترین ویژگی هایی بود که Next.js ارائه کرد و از این به بعد خود React هم این ویژگی رو در اختیار ما میزاره 🙂

تا به امروز تمامی کامپوننت های ما سمت کاربر ( Client ) رندر میشدن اما از ری اکت 19 به بعد میتونیم کامپوننت های خودمون رو سمت سرور render کنیم.

حالا شاید این سوال برامون پیش بیاد که اصلا Server Component در ری اکت چه مزایایی داره ؟

از مهمترین مزایای server component میشه به موارد زیر اشاره کرد :

  • سئو :

زمانیکه ما کامپوننت های خودمون رو سمت سرور render میکنیم، به خزنده های موتور های جستجوگر ( Crawlers ) این اجازه رو میدیم که به محتوای صفحات و کامپوننت های ما دسترسی داشته باشن و در نتیجه اپیکیشن ما در نتایج موتور های جستجوگر دیده بشه.

  • بهینگی :

رندر شدن کامپوننت در سمت سرور باعث میشه کامپوننت ما خیلی سریعتر رندر بشه و زمان Initial Page Load خیلی کمتر باشه!

  • اجرای سمت سرور :

رندر شدن کامپوننت در سمت سرور یعنی اجرا شدن کد های ما در سرور! این یعنی برخی کارها مثل API Call و.. رو خیلی بهتر میتونیم انجام بدیم.

مزایای بالا فوق العاده هستن و باعث میشن ما برخی کامپوننت های خودمون رو در سمت سرور Render کنیم. تمامی کامپونت های ما در ری اکت سمت کلاینت render میشن اما درصورتیکه در خط اول کامپوننت خودمون از عبارت ‘use server’ استفاده کنیم، کامپوننت ما سمت سرور رندر خواهد شد.

ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

3- Actions ها در ری اکت 19 !

یکی دیگه از تغییرات React 19 بحث Actions هست. در حقیقت Actions کمک میکنه که ما با فرمها خیلی بهینه تر بتونیم کار کنیم.

اجازه بدید یه مقایسه ای انجام بدیم بین زمانیکه Actions داریم و زمانیکه Actions رو نداریم ..

قبل ری اکت 19 ( که Actions رو نداشتیم ) :

تو تیکه کد زیر ما از onSubmit استفاده کردیم که تابع search رو اجرا میکنه اما مشکلی که داره این هست که ما عملیات جستجو ( search ) رو فقط در سمت کلاینت میتونیم انجام بدیم و در سمت سرور قادر به انجام جستجو نیستیم:

				
					<form onSubmit={search}>
  <input name="query" />
  <button type="submit">جستجو</button>
</form>

ری اکت 19 ( که Actions رو داریم ) :

حالا که ویژگی Server Components معرفی شده ما میتونیم Actions رو سمت سرور اجرا کنیم. در حقیقت Actions میتونه اطلاعات فرم مارو به سمت کلاینت یا سرور ارسال کنه.

همچنین Actions به ما اجازه اجرای کد های Sync و Async رو میده :

 

				
					"use server"

const submitData = async (userData) => {
    const newUser = {
        username: userData.get('username'),
        email: userData.get('email')
    }
    console.log(newUser)
}
				
			
				
					const Form = () => {
    return <form action={submitData}>
        <div>
            <label>نام:</label>
            <input type="text" name='username'/>
        </div>
        <div>
            <label>نام:</label>
            <input type="text" name="email" />
        </div>
        <button type='submit'>تایید</button>
    </form>
}

export default Form;

به محض در دسترس قرار گرفتن Actions در ری اکت، خیلی بیشتر درمورد این ویژگی صحبت میکنیم.

 

ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

4 – وب کامپوننت ها در ری اکت 19 !

اجازه بدید ویژگی Web Components رو با شرح مشکلی که باهاش دست و پنجه نرم میکردیم معرفی کنیم.

فرض کنید توی یکی از صفحات خودمون به یک چرخ و فلک ( از این چرخ و فلکا که برای قرعه کشی و مسابقه استفاده میشه ) نیاز داریم و نمیخوایم خودمون کد بزنیم چون زمانی کافی براش نداریم. تو گوگل دمبال تیکه کد آماده چرخ و فلک میگردیم و پیدا میکنیم اما یک مشکل بزرگ پیش میاد !

تیکه کدی که پیدا کردیم با HTML,CSS و JS کد زده شده و ما نمیتونیم از همین تیکه کد تو React استفاده کنیم! راه حل تبدیل این تیکه کد به JSX هست اما این پروسه خیلی زمانبر و خسته کنندس مخصوصا اگه JS خام این تیکه کد زیاد و پیچیده باشه.

خوشبختانه تو ری اکت 19 این چالش رو دیگه نداریم 🙂

ویژگی Web Components به ما این اجازه رو میده که از کامپوننت های وب ( یعنی تیکه کد هایی که با HTML,CSS,JS توسعه داده شدن ) همونطور که هستن و بدون تبدیل به JSX تو پروژه های ری اکتی خودمون استفاده کنیم.

این خیلی شگفت انگیز و جالبه!

یعنی از این به بعد میتونیم از تیکه کد های آماده ای که با HTML , CSS و JS توسعه داده شدن تو پروژه های ری اکتی خودمون بدون نگرانی از بابت نصب پکیج اضافه، دستکاری مستقیم DOM ، تبدیل کردن به JSX و .. استفاده کنیم.

کامپوننت متا دیتا در React 19

5- کامپوننت Metadata در ری اکت !

تو مبحث سئو ( بهینه سازی صفحات برای موتور های جستجوگر مثل گوگل ) چندین متاتگ خیلی مهم وجود دارن که ما باید برای صفحات خودمون مشخص کنیم. چند مورد از این تگ ها عبارتند از :

  • متا تگ title
  • متا تگ description
  • و …
با توجه به اینکه اپیکیشن های ری اکتی SPA ( تک صفحه ) هستن، اضافه کردن هر تگ برای هر صفحه ممکنه کمی سخت و دشوار باشه.
تا به امروز ما برای مدیریت این قضیه از پکیج ها و کتابخانه های جانبی مثل کتابخانه React Helmet استفاده میکردیم اما استفاده از این کتابخانه ها هم میتونه خسته کننده باشه و احتمال بروز خطا رو بالا ببره!
بعضی از React Developer ها هم این قضیه رو دستی مدیریت میکردن و از پکیج های جانبی استفاده نمیکردن.
قبل ری اکت 19 :
				
					import React, { useEffect } from 'react';

const HeadDocument = ({ title }) => {
  useEffect(() => {
    document.title = title;

 	const metaDescriptionTag = document.querySelector('meta[name="description"]');
    if (metaDescriptionTag) {
    metaDescriptionTag.setAttribute('content', 'جدید description');
    }
  }, [title]);

  return null;
};

export default HeadDocument;

تو تیکه کد بالا ما یک کامپوننت به اسم HeadDocument ساختیم که بر اساس Props دریافتی، مقدار meta title و meta description صفحه مارو مشخص میکنه. همچنین از یک useEffect استفاده کردیم ( یعنی برای ست کردن متاتگ ها داریم از JS استفاده میکنیم که پیچیدگی کد رو بالا میبره )

ری اکت 19 :

تو ری اکت 19 به لطف معرفی کامپوننت Metadata دیگه میتونیم متاتگ های خودمون رو مستقیما تعریف کنیم :

 

				
					Const HomePage = () => {
  return (
    <>
      <title>فِرانت اِندی</title>
      <meta name="description" content="مرجع تخصصی آموزش فِرانت اِند" />
      // Page content
    </>
  );
}

همونطور که تو تیکه کد بالا مشخصه، خیلی راحت و تمیزتر تونستیم متاتگ های صفحه خودمون رو مشخص کنیم! انجام اینکار به لطف React 19 امکانپذیر شده 🙂

ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

6 – بارگذاری بهینه Assets ها !

یکی از مهمترین کارایی که ما به عنوان یک React Developer باید انجام بدیم، مدیریت بارگذاری Assets های پروژه مثل فونت و تصاویر هست.

مرورگر زمانیکه به صفحات ما برمیخوره، میره سراغ دانلود کردن فایلهای Assets صفحه مثل فونت، تصاویر، فایلهای css و …

تا زمانیکه این دانلود تمام بشه، کاربر یک صفحه بدون فونت، استایل و .. میبینه و به محض تکمیل دانلود Assets توسط مرورگر، نما عوض میشه و فونت، استایل و تصاویر در صفحه قرار میگیرن.

این سو سو زدن صفحه خیلی جالب نیست! اما نگران نباشید 🙂

ری اکت 19 خودش در پشت صحنه Assets های صفحات مارو دانلود میکنه و این پروسه باعث میشه زمان Load صفحات ما تا حد خیلی زیادی کمتر بشه و زمان انتظار کاربر برای نمایش محتوا نیز کمتر بشه.

همچنین تو ری اکت 19 کاربر زمانی محتوا رو میبینه که محتوای صفحه آمادست! یعنی زمانیکه فونت ها، تصاویر و استایلها دانلود نشدن کاربر صفحه بدون استایل نمیبینه!

در زمانیه بارگذاری بهینه Assets ها در React 19 چندین API جدید معرفی شده از جمله :

  • قابلیت preload
  • قابلیت preinit

این 2 قابلیت کمک میکنن که Assets های پروژه خودمون رو بهتر بتونیم مدیریت کنیم.

 

ری اکت 19 - آموزش ری اکت 19 - آموزش React 19

7- هوک های جدید ری اکت 19 !

درست شنیدید 🙂 دوباره هوک جدید داریم 🙂

یکی از مهمترین برتری های ری اکت نسبت به سایر کتابخانه ها و فریمورک ها، وجود هوک های قدرتمندش بود. تیم فنی ری اکت این مسئله رو به خوبی درک کردن و هنوز هم درحال توسعه و معرفی هوک های جدیدتر هستن ..

البته موضوع فقط معرفی هوک های جدید نیست! چون روش استفاده و کاربرد برخی هوک های قدیمی نیز تغییر کرده!

بریم ببینیم این تغییرات در زمینه هوک ها، شامل چه هوک هایی میشه ؟

+ عاقبت هوک useMemo در ری اکت 19 !

همونطور که کمی قبلتر درموردش صحبت کردیم، تو ری اکت 19 امکان استفاده از React Forget ( کامپایلر ری اکت ) رو داریم که خودش در پشت صحنه عملکرد useMemo رو اعمال میکنه. این یعنی دیگه نیازی به استفاده از useMemo نخواهیم داشت!

قدیما اینجوری از هوک useMemo استفاده میکردیم :

				
					import React, { useState, useMemo } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  // Memoize the result of checking if the input value is empty
  const isInputEmpty = useMemo(() => {
    console.log('Checking if input is empty...');
    return inputValue.trim() === '';
  }, [inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="یچی بنویس."
      />
      <p>{isInputEmpty ? 'Input is empty' : 'Input is not empty'}</p>
    </div>
  );
}

export default ExampleComponent;

تو تیکه کد بالا واضحه که چرا و چطور باید از هوک useMemo برای کش کردن Value های خودمون استفاده میکردیم.

اما تو نسخه جدید ری اکت، خود React در پشت صحنه این کار رو انجام میده و دیگه نیازی به useMemo نداریم :

				
					import React, { useState, useMemo } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  const isInputEmpty = () => {
    console.log('Checking if input is empty...');
    return inputValue.trim() === '';
  });

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="یچی بنویس."
      />
      <p>{isInputEmpty ? 'Input is empty' : 'Input is not empty'}</p>
    </div>
  );
}

export default ExampleComponent;

تو تیکه کد بالا، کامپایلر ری اکت در پشت صحنه useMemo رو استفاده میکنه و دیگه نیازی نیست ما ازش استفاده کنیم:)

سرانجام هوک forwardRef در React 19 !

اگه با forwardRef آشنا نیستین مقاله هوک forwardRef رو مطالعه کنین. کاربرد این هوک این بود که یک ref ( رفرنس ) رو از کامپوننت والد به کامپوننت فرزند منتقل میکرد. تو نسخه جدید ری اکت، میتونیم ref های خودمون رو به عنوان Props منتقل کنیم.

قدیما اینجوری از forwardRef استفاده میکردیم :

				
					import React, { forwardRef } from 'react';

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

اما از این به بعد میتونیم ref های خودمون رو بدون forwardRef منتقل کنیم:

				
					import React from 'react';

const ExampleButton = ({ ref, children }) => (
  <button ref={ref}>
    {children}
  </button>
);

معرفی هوک ()use در ری اکت 19 !

همزمان با نسخه جدید ری اکت ( 19 ) یک هوک جدید به اسم use معرفی شد!

این هوک نحوه استفاده از Promise ها، کد های Async و Context رو مدیریت میکنه.

نحوه استفاده از هوک use در ری اکت بصورت زیر هست :

				
					const value = use(resource);

اما بیاید یکم کاربردی تر این هوک رو یاد بگیریم. من میخوام از هوک use برای Fetch کردن یکسری اطلاعات از سرور استفاده کنم :

				
					import { use } from "react";

const fetchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
  };
  
  const UsersItems = () => {
    const users = use(fetchUsers());
  
    return (
      <ul>
        {users.map((user) => (
          <div key={user.id} className='bg-blue-50 shadow-md p-4 my-6 rounded-lg'>
            <h2 className='text-xl font-bold'>{user.name}</h2>
            <p>{user.email}</p>
          </div>
        ))}
      </ul>
    );
  }; 
export default UsersItems;

اما تو تیکه کد بالا دقیقا چیکار کردیم ؟

تابع fetchUsers مسئول دریافت داده از سرور هست.

ما از هوک use در خط 9 برای اجرا کردن تابع fetchUsers استفاده کردیم ( دیگه از useEffect یا useState برای اجرا کردن تابع خودمون استفاده نکردیم )

خروجی خط 9، متغیر users هست.

در نهایت در خط 13 ما روی users متود map رو اجرا کردیم تا خروجی رو نمایش بدیم.

جای دیگه ای که ما میتونیم از هوک use استفاده کنیم، Context هست. همونطور که میدونیم Context یک روش برای مدیریت Global State ها هست ( بدون نیاز به کتابخانه های جانبی )

از این به بعد ما میتونیم به جای استفاده از ()useContext از use(context) استفاده کنیم :

				
					import { createContext, useState, use } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const Card = () => {
  // use Hook()
  const { theme, toggleTheme } = use(ThemeContext);

  return (
    <div
      className={`p-4 rounded-md ${
        theme === 'light' ? 'bg-white' : 'bg-gray-800'
      }`}
    >
      <h1
        className={`my-4 text-xl ${
          theme === 'light' ? 'text-gray-800' : 'text-white'
        }`}
      >
        Theme Card
      </h1>
      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
       Hello!! use() hook
      </p>
      <button
        onClick={toggleTheme}
        className='bg-blue-500 hover:bg-blue-600 text-white rounded-md mt-4 p-4'
      >
        {theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
      </button>
    </div>
  );
};

const Theme = () => {
  return (
    <ThemeProvider>
      <Card />
    </ThemeProvider>
  );
};

export default Theme

تو تیکه کد بالا چخبره ؟

تو خط 5، ما ThemeProvider رو داریم که مسئول ارائه Theme اپیکیشن ما هست.

تو خط 19 کامپوننت Card رو داریم که در آن از Context خودمون استفاده کردیم.

هوک useFormStatus در نسخه جدید ری اکت !

تو نسخه جدید ری اکت، هوک های باحالی برای مدیریت Form ها معرفی شدن. در کل تو نسخه 19 ری اکت خیلی بهتر میتونیم فرم هارو مدیریت کنیم.

هوک useFormStatus به ما این امکان رو میده که کنترل خیلی بیشتری روی فرمهایی که ایجاد میکنیم داشته باشیم.

شکل کلی استفاده از هوک useFormStatus بصورت زیر هست :

 

				
					const { pending, data, method, action } = useFormStatus();

یا بصورت مختصر تر :

				
					const { status } = useFormStatus()

تو تیکه کد اول ما pending,data,method و action رو داریم.

مقدار pending تعیین میکنه که فرم ما چه زمانی در حالت pending ( منتظر بمانید ) هست. اگه فرم ما در حالت pending باشه، مقدار pending برابر با True خواهد بود.

مقدار data شامل اطلاعات فرم ما خواهد بود.

مقدار method مشخص میکنه که متود مشخص شده برای فرم ما چیه ( این مقدار بصورت پیشفرض Get خواهد بود )

به کمک این هوک میتونیم کارهای خیلی زیادی انجام بدیم از جمله نمایش حالت Loading ( منتظر بمانید ) به کاربر.

یک مثال واقعی از هوک useFormStatus در ری اکت بصورت زیر هست :

				
					import { useFormStatus } from "react-dom";

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>{status.pending ? 'Submitting...' : 'Submit'}</button>;
}

const formAction = async () => {
  // Simulate a delay of 2 seconds
  await new Promise((resolve) => setTimeout(resolve, 3000));
}

const FormStatus = () => {
  return (
    <form action={formAction}>
      <Submit />
    </form>
  );
};

export default FormStatus;

اما تو تیکه کد بالا چه اتفاقی افتاده ؟

تو خط 3 متود Submit رو داریم که به ما این اجازه رو میده تا status فرم خودمون رو بررسی کنیم ( که در حالت pending هست یا خیر )

تو خط 5 مقدار status.pending رو بررسی کردیم تا بر اساس مقدار pending یک خروجی مناسب به کاربر نمایش بدیم.

تو خط 8 نیز formAction رو داریم که باعث اعمال یک تاخیر 3 ثانیه ای در پروسه submit کردن فرم میشه.

به کمک هوک useFormStatus در React میتونیم از وضعیت فرم خودمون مطلع بشیم و حالت “منتظر بمانید” به کاربر نمایش بدیم.

هوک useFormState در ری اکت 19 !

هوک useFormState به ما این امکان رو میده که State خودمون رو بر اساس نتیجه submit شدن فرم آپدیت کنیم.

شکل کلی استفاده از هوک useFormState بصورت زیر هست :

				
					const [state, formAction] = useFormState(fn, initialState, permalink?);

تو تیکه کد بالا تابع fn رو داریم. این تابع زمانی اجرا میشه که فرم ما submit میشه ( کاربر روی دکمه تایید کلیک میکنه )

مقدار initialState به عنوان مقدار اولیه فرم ما میتونه قرار بگیره.

مقدار permalink یک URL هست. ( این مقدار اختیاریه و مربوط به URL تاییدیه فرم هست )

خروجی هوک useFormState سه مقدار هست :

مقدار state شامل همون initialState هست که به فرم دادیم.

و formAction رو داریم که عملی هست که به اکشن فرم منتقل می شود.

تو تیکه کد زیر، ما بصورت عملی و کامل از هوک useFormState استفاده کردیم:

				
					import { useFormState} from 'react-dom';

const FormState = () => {
    const submitForm = (prevState, queryData) => {
        const name =  queryData.get("username");
        console.log(prevState); // previous form state
        if(name === 'john'){
            return {
                success: true,
                text: "Welcome"
            }
        }
        else{
            return {
                success: false,
                text: "Error"
            }
        }
    }
    const [ message, formAction ] = useFormState(submitForm, null)
    return <form action={formAction}>
        <label>Name</label>
        <input type="text" name="username" />
        <button>Submit</button>
        {message && <h1>{message.text}</h1>}
    </form>
}

export default FormState;

اما تو تیکه کد بالا دقیقا چیکار کردیم ؟

تو خط 4 ما submitForm رو داریم که مسئول ارسال فرم هست. ( این همون Action، ویژگی جدید ری اکت هست که درموردش صحبت کرده بودیم )

داخل submitForm ما مقدار فرم رو بررسی کردیم و سپس بر اساس شرایط فرم ( موفق بودن یا نبودن ) مقادیر مناسبی رو به کاربر نمایش دادیم.

هوک useOptimistic در React 19 !

هوک useOptimistic به ما این اجازه رو میده که یک وضعیت رو به کاربر نمایش بدیم ( هنگام اجرای یک عمل Async )

این موضوع کمک میکنه کاربران ما تجربه کاربری بهتری داشته باشن ( بهبود UX )

شکل کلی استفاده از هوک useOptimistic در React بصورت زیرهست:

				
					const [ optimisticMessage, addOptimisticMessage] = useOptimistic(state, updatefn)

مثلا فرض کنید دریافت یک پاسخ از سرور چند ثانیه طول میکشه. ما میتونیم در این حین یک State مثل “منتظر بمانید” به کاربر نمایش بدیم.

این فوق العادس چون کاربر بلافاصله یک پاسخ میبینه!

تو تیکه کد زیر ما از هوک useOptimistic استفاده کردیم ( در زمینه فرم ) :

				
					import { useOptimistic, useState } from "react";

const Optimistic = () => {
  const [messages, setMessages] = useState([
    { text: "Hey, I am initial!", sending: false, key: 1 },
  ]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );

  async function sendFormData(formData) {
    const sentMessage = await fakeDelayAction(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }

  async function fakeDelayAction(message) {
    await new Promise((res) => setTimeout(res, 1000));
    return message;
  }

  const submitData = async (userData) => {
    addOptimisticMessage(userData.get("username"));

    await sendFormData(userData);
  };

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={submitData}>
        <h1>OptimisticState Hook</h1>
        <div>
          <label>نام کاربری</label>
          <input type="text" name="username" />
        </div>
        <button type="submit">تایید</button>
      </form>
    </>
  );
};

export default Optimistic;

تو تیکه کد بالا fakeDelayAction رو داریم که یک روش جعلی برای به تاخیر انداختن Submit شدن فرم هست تا State خودمون رو به کاربر نمایش بدیم.

همچنین submitData رو داریم که مسئول ارسال داده های فرم ماست.

همچنین sendFormData رو داریم که مسئول ارسال فرم به fakeDelayAction هست.

 

الان میتونیم از ویژگی های ری اکت 19 استفاده کنیم ؟

بله ! همین چند روز پیش نسخه پایدار ری اکت 19 داخل npm منتشر شد و قابل استفادست!

جمع بندی

تو این مقاله ما به بررسی ویژگی ها و قابلیت های React 19 پرداختیم و دیدیم که چقدر میزان این تغییرات زیاد بوده!

این تغییرات به ما کمک میکنن تا تجربه خیلی بهتری در زمان توسعه داشته باشیم و خروجی نهایی اپیکیشن ما بهینه تر باشه!

امیدوارم که این مقاله براتون مفید واقع شده باشه. هر سوالی در این زمینه براتون پیش اومد تو بخش کامنت ها مطرح کنید خیلی زود پاسخ میدم 🙂

درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

11 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

دیدگاهتان را بنویسید