انتشار نسخه ۱۸ ری اکت – ویژگی های نسخه جدید React

با سلام خدمت همراهان همیشگی آکادمی راهکارینو. بالاخره انتظارها به پایان رسید و نسخه 18 ری اکت منتشر شد. در تاریخ 15 نوامبر 2021 میلادی نسخه بتای ری اکت ورژن 18 ارائه شد. در نسخه جدید React ویژگی های زیادی به این کتابخانه محبوب اضافه شده است که در این مقاله به معرفی و بررسی آنها می پردازیم.

1- Automatic Batching:

عملیات batching در ری اکت زمانی رخ می دهد که آپدیت های دو state در یک re-render ادغام شوند.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet

    // React will only re-render once at the end (that's batching!)

  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

در قطعه کد فوق، کامپوننت App تنها زمانی re-render می شود که رویداد handleClick اجرا شود. در حالیکه شاید تصور کنیم بخاطر وجود دو متد setCount و setFlag ، کامپوننت App دو بار re-render (رندر مجدد) می شود.

اما در صورتی که دو state مذکور را درون یک Promise یا Callback اجرا کنیم کامپوننت App دو بار رندر خواهد شد:

// Promise
fetchSomething().then(()=> {
    setCount(count+1);
    setFlag(true);
})

//callback or timeout
setTimeOut(()=>{
    setCount(count + 1);
    setFlag(true);
})

بنابراین ری اکت دو آپدیت فوق را در یک رندر batch نمی کند و ما عملا دو بار رندر شدن کامپوننت را خواهیم دید. در حالیکه به یک re-render نیاز داریم.

یکی از ویژگی های مهم ری اکت 18 قابلیت Automatic Batching می باشد. به این شکل که در سناریوی بالا، کامپوننت موردنظر دو بار رندر نمی شود و فقط یکبار رندر مجدد می شود.

import {unstable_batchedUpdates} from 'react-dom';
unstable_batchedUpdates(() => {
    setCount(count + 1);
    setFlag(true);
})

//React 18 will do it for you by default.

چطور می توان قابلیت batching اتوماتیک را غیرفعال کرد؟

در مواقعی که می خواهید عملیات ادغام آپدیت ها یا batching رخ ندهد، باید از flushSync به شکل زیر استفاده کنید:

import {flushSync} from 'react-dom';

function handleClick(){
    flushSync(()=> {
            setCount(count + 1);
    });
    // React has re-render

    flushSync(()=> {
            setFlag(true);
    });
    // React will re-render
}

در حالت فوق، با اجرای فانکشن داخل flushSync کامپوننت یکبار مجددا رندر خواهد شد.

2- Transitions:

یکی از آپدیت های اصلی ری اکت در نسخه 18 اینست که می توان به ریکت گفت کدامیک از آپدیت ها مهم و حیاتی هستند و کدامیک اهمیت چندانی ندارند. یکی از مثال های خوب در این زمینه، فیلد input مربوط به جستجو می باشد. جایی که می خواهیم لیستی از آیتم ها را فیلتر کنیم. به این صورت که وقتی در حال تایپ عبارت موردنظر در search input هستیم، عملیات آپدیت انجام شود و نتایج جستجو بلافاصله نمایان شود.

import {startTransition} from 'react';

//Urgent : Update input value as type
setInputValue(input);

startTransition(()=>{
    //Secondary: Show the search results
    setSearchQuery(input)
});

در این مثال می توانیم تغییرات مقدار input را بعنوان یک آپدیت حیاتی یا urgent update در نظر بگیریم و نمایش نتایج جستجو را بعنوان آپدیت با اولویت دوم (یا transition) تعریف کنیم. دقت کنید که آپدیت های Transitions می توانند بوسیله آپدیت های ضروری یا urgent دچار وقفه شوند و اجرایشان متوقف شود. این قضیه باعث می شود UI یا رابط کاربری آخرین آپدیت مهم را نمایش دهد و آپدیت های ثانویه یا غیر اساسی در نظر گرفته نشوند.

همانطور که در قطعه کد فوق مشاهده می کنید، تغییرات داخل input را بعنوان آپدیت اولیه یا primary تعریف کرده ایم و نمایش نتایج جستجو را داخل transition و بعنوان آپدیت ثانویه یا secondary در نظر گرفتیم. توجه کنید گه آپدیت هایی را بصورت transitions تعریف می کنیم که اولا از اهمیت پایین تری برخوردار هستند و دوما ممکن است کاری زمانبر باشند و اجرای کامل آنها باعث شود رابط کاربری دچار اختلال شود و تجربه کاربری (UX) اپلیکیشن را دچار ضعف کند.

startTransition یک روش عالی است برای تعریف تسک هایی که ممکن است اجرای آنها زمانبر باشد مانند دریافت داده از API . با استفاده از این روش، اینگونه تسک ها در پس زمینه اجرا می شوند و باعث بروز اختلال در UI و کند شدن اپلیکیشن نخواهند شد.

>>> مطالعه مقاله “آموزش مقدماتی کتابخانه ری اکت” پیشنهاد می شود.

3- Suspense and Server-Side Rendering:

روشی که SSR یا Server-Side-Rendering کار می کند به اینصورت است که تمام کامپوننت ها را سمت سرور رندر می کند و نتیجه را در قالب HTML به مرورگر کاربر می فرستد و سپس در مرحله بعد، جاوا اسکریپت وارد میدان می شود و باعث می شود صفحات HTML تعاملی شوند و با کاربر ارتباط برقرار کنند. اما این قضیه یک مشکل اساسی دارد. و آن اینست که تا زمانی که Javascript وارد میدان نشود و لود نشود، صفحه html ما هیچ تعامل یا interact با کاربر ندارد و استاتیک است.

برای رفع این مشکل، گتابخانه react در نسخه 18 خودش دو ویژگی مرتبط با SSR را معرفی می کند:

Streaming HTML:

قابلیت streaming html به این معنی است که سرور می تواند کامپوننت ها را تا جایی که رندر شده اند به سمت کلاینت ارسال کند و منتظر نباشد تا کل کامپوننت تکمیل شود. این قابلیت با استفاده از Suspense در ری اکت قابل پیاده سازی می باشد. به کد زیر دقت کنید:

<Page>
    <Article />
    <Suspense fallback={<Loader />}>
         <Comments />   
    </Suspense>
</Page>

در این مثال گفتیم که رندر شدن کامپوننت Comments می تواند زمانبر باشد و از اهمیت کمتری نسبت به کامپوننت Article برخوردار است. پس آن را داخل Suspense قرار دادیم تا لود این صفحه معطل رندر شدن کامل دو کامپوننت Comments و Article نباشد.

در کد بالا، کامپوننت اصلی ما Article است و کامپوننت Comments فرعی می باشد که شامل نظرات کاربران درباره یک مقاله است.

در هنگامی که منتظر رندر شدن Comments هستیم می توان یک تصویر بارگذاری یا لودینگ نمایش داد و به محض اینکه کامپوننت آماده نمایش شد تصویر بطور اتوماتیک مخفی می شود و نظرات کاربران نمایش خواهد یافت.

Selective hydration:

قبلا باید منتظر می ماندیم تا کامپوننت درخواستی ما بصورت کامل رندر شود و سپس عملیات hydration انجام شود. اما الان با وجود Suspense نیازی نیست hydration معطل رندر شدن کامپوننت بماند.

ویژگی جدیدی که ری اکت در ورژن 18 ارائه داد این است که اگر کاربر تعاملی با کامپوننت در حال hydration انجام دهد، عملیات hydration این کامپوننت اولویت پیدا می کند و ری اکت ابتدا hydration این کامپوننت را به اتمام می رساند.

4- تعریف Root بصورت جدید:

در نسخه های قبلی ری اکت برای تعریف root ، کامپوننت App را بعنوان آرگومان اول reactDOM.render تعریف می کردیم و المان root را بصورت document.getElementById بعنوان آرگومان دوم تعریف می کردیم.

در واقع، کامپوننت اصلی یعنی همان App را داخل المانی با آیدی root رندر می کردیم.

اما در نسخه 18 ری اکت، مطابق تصویر زیر، با فراخوانی متد createRoot یک متغیر روت می سازیم و المان با آیدی root را به آن پاس می دهیم. سپس متد render را روی متغیر root اجرا کرده و کامپوننت App را بعنوان آرگومان به آن پاس می دهیم:

5- useDeferredValue:

useDeferredValue دو مقدار بعنوان ورودی می گیرد. اولین آرگومان مقدار state موردنظر است و آرگومان دوم مقدار timeout با واحد میلی ثانیه می باشد.

این قابلیت زمانی کاربرد دارد که توسه دهنده می خواهد زمان نمایش داده ها در UI را هماهنگ کند. به این صورت که فرض کنید دو مدل داده دارید و می خواهید آنها را به کاربر نمایش دهید. یکی از این داده ها بلافاصله قابل نمایش است اما داده دوم نیازمند دریافت اطلاعات از بک اند یا API می باشد. پس نمایش داده دوم زمانبر است. با استفاده از useDeferredValue می توان برای نمایش داده اول نیز تاخیر ایجاد کرد تا هر دو داده تقریبا همزمان با هم در رابط کاربری نمایش یابند.

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