هرچیزی که باید از هوک useDeferredValue بدونیم

درود فراوان دوستان 🤚 من امیررضا ریاحی هستم نویسنده جدید دیتی. تو این پست از دیتی قراره با هم یکی از هوک‌های ری‌اکت به نام useDeferredValue رو بررسی کنیم. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که شامل مجموعه‌ای از پست‌های کوتاه و کاربردی ری‌اکتی میشه.

useDeferredValue چیه؟

useDeferredValue یکی از هوک‌هایی هست که در React ۱۸ معرفی شد. کار اصلی این هوک اینه که به شما اجازه میده آپدیت کردن رابط کاربری (UI) رو به تعویق بندازین و همچنین می‌تونین به درخواست‌ها پاسخ بدین بدون اینکه UI پروژتون تحت تاثیر قرار بگیره.

اما این هوک بیشتر کجاها کاربرد داره ؟ 🤔

برای زمانی‌هایی که یک محتوای جدید در حال بارگذاریه ولی شما نمی‌خواین UI پروژتون وابسته به بارگذاری محتوای جدید باشه. برای همین محتوای فعلی رو به کاربر نمایش میدین تا محتوای جدید به طور کامل بارگذاری بشه و جایگزین محتوای فعلی بشه. این میتونه رابط‌کاربری رو افزایش بده 🚀
می‌تونیم از این هوک برای زمانی‌هایی که می‌خوایم به کاربر اطلاع بدیم که محتوای جدید درحال بارگذاری هست استفاده کنیم. اینجوری کاربر متوجه میشه محتوای جدید داره لود میشه پس منتظر می‌مونه و محتوای فعلی رو تا جایگزینی می‌تونه مشاهده کنه و ازش استفاده کنه ⌛
با استفاده از useDeferredValue می‌تونیم رندر کردن بخشی از رابط کاربری را به تأخیر انداخت تا از پرش‌ها و قطعی‌ها در نتیجه عملیات‌های طولانی جلوگیری بشه و تجربه‌کاربری بهتر ایجاد کرد ⚡

نحوهٔ استفاده از useDeferredValue چجوریه؟

همونطور که می‌دونین قابلیت "سرچ کردن" در اکثر پروژه‌ها دیده میشه. پیاده‌سازی این قابلیت به این شکله که شما باید روی هر حرف جدیدی که کاربر وارد میکنه اطلاعات رو به سمت سرور بفرستین تا نتیجه رو نمایش بدین. پیاده‌سازی این قابلیت بدون استفاده از useDeferredValue برنامه شما رو کند میکنه!

حالا چرا؟ 🧐

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

اما بریم سراغ نحوهٔ استفاده از useDeferredValue و این مثال رو باهم پیاده‌سازی کنیم.

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

import {use} from 'react';
import { fetchData } from './data.js';

export function SearchResults({ query }) {
  const albums = fetch(`/search?q=${query}`);

  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}

می‌ریم به کامپوننت App و پیاده‌سازی رو با useDeferredValue آغاز می‌کنیم.

در ری‌اکت اولین کار برای استفاده از هوک اینه که اون رو Import کنیم:

import { useDeferredValue, useState } from 'react';
import SearchResults from './SearchResults';

سپس داخل کامپوننت App یک استیت برای query ست می‌کنیم:

const [query, setQuery] = useState('');

حالا کاری که باید بکنیم اینه که query رو پاس بدیم به useDeferredValue:

const deferredQuery = useDeferredValue(query);

⚠️ هوک useDeferredValue دو ورودی میگیره که اولی مقدار مد نظر ما و دومی که اختیاریه مقدار اولیه یا Initial value هست.

حالا وقتشه رندر رو انجام بدیم:

return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );

همونطور که می‌بینید کامپوننت SearchResults رو برای عملکرد بهتر، درون Suspense قرار دادیم تا زمانی که داده بارگذاری میشه، پراپ fallback برامون نمایش داده بشه.

و سپس deferredQuery رو به عنوان پراپ به SearchResults پاس میدیم تا پردازش انجام بشه.

خب دوستان رسیدیم به پایان این پست از دیتی. امیدوارم استفاده کرده باشین و یادتون نره اگر سوال یا ابهامی داشتید می‌تونین در قسمت کامنت‌ها برام بنویسید و حتما پاسخگو خواهم بود ☘️

منبع :