ترنزیشن ها (Transitions) (Transitions)

وقتی برنامه React شلوغ می شود، ممکن است موقع تایپ یا کلیک، رابط کاربری گیر کند. اینجا هوک useTransition کمک می کند ترنزیشن در React را اضافه کنی و به بعضی آپدیت ها بگویی «عجله ای نیست».

useTransition در React چیست؟

هوک useTransition یک ابزار در React است. این هوک می گذارد بعضی تغییرهای state را «کم اهمیت» علامت بزنی.

وقتی آپدیت مهم داریم، مثل تایپ در input، آن را فوری اجرا می کنیم. اما آپدیت سنگین، مثل رندر لیست بزرگ، داخل ترنزیشن می رود تا رابط کاربری روان بماند.

چه زمانی از ترنزیشن در React استفاده کنیم؟

ترنزیشن در React برای آپدیت های سنگین و غیر فوری عالی است. چند حالت رایج را ببین:

• جست وجوی سنگین که لیست طولانی نشان می دهد.
• فیلترکردن جدول های بزرگ یا گزارش ها.
• بارگذاری محتوای جدید که چند ثانیه طول می کشد.

پس ورودی های کاربر مثل تایپ، کلیک و اسکرول باید فوری باشند. اما چیزهایی مثل «آپدیت نتایج» می توانند داخل ترنزیشن اجرا شوند.

نصب هوک useTransition (نیاز به نسخه جدید React)

useTransition بخشی از React است، اما معمولا در پروژه های مدرن با ابزارهایی مثل Vite یا Create React App استفاده می شود. اول مطمئن شو React به روز است، بعد با کد زیر ابزارها را نصب نگه دار:

npm install react

مشاهده در ادیتور

نکته: در مثال های این صفحه، فرض شده پروژه React آماده است و فقط می خواهیم ترنزیشن در React را روی state ها پیاده کنیم.

مثال ساده از ترنزیشن در React

در این مثال، موقع تایپ در input، متن ورودی فوری به روزرسانی می شود. اما نمایش «نتایج جست وجو» داخل ترنزیشن است تا اگر سنگین شد، رابط کاربری گیر نکند.

import { useState } from 'react';
import { useTransition } from 'react';

function SearchBar() {
  const [text, setText] = useState('');
  const [results, setResults] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setText(e.target.value);

    startTransition(() => {
      setResults(e.target.value);
    });
  };

  return (
    <div>
      <input value={text} onChange={handleChange} />
      {isPending ? (
        <p>
          Loading...
        </p>
      ) : (
        <p>
          Search results for: {results}
        </p>
      )}
    </div>
  );
}

مشاهده در ادیتور

اینجا setText فوری اجرا می شود، چون کاربر باید تایپ را ببیند. اما setResults داخل startTransition است، پس اگر رندر نتایج سنگین شود، رابط کاربری هنوز پاسخ گو می ماند.

مثال واقعی: جست وجوی سنگین با ترنزیشن در React

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

import { useState } from 'react';
import { useTransition } from 'react';

function SearchResults({ query }) {
  const items = [];

  if (query) {
    for (let i = 0; i < 1000; i++) {
      items.push(
        <li key={i}>
          Result for {query} - {i}
        </li>
      );
    }
  }

  return (
    <ul>
      {items}
    </ul>
  );
}

function App() {
  const [input, setInput] = useState('');
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setInput(e.target.value);

    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={handleChange}
        placeholder="Type to search..."
      />
      {isPending && (
        <p>
          Loading results...
        </p>
      )}
      <SearchResults query={query} />
    </div>
  );
}

مشاهده در ادیتور

در این مثال، ورودی input سریع عوض می شود. رندر لیست نتایج که سنگین است داخل startTransition اجرا می شود. متغیر isPending هم وقتی true باشد، متن «Loading results...» را نشان می دهد.

جزئیات هوک useTransition

هوک useTransition دو چیز برمی گرداند:

• isPending یعنی الان یک ترنزیشن در حال اجرا است یا نه.
• startTransition تابعی که آپدیت ها را «کم اهمیت» علامت می کند.

هر آپدیتی که داخل startTransition قرار بدهی، در اولویت پایین تر اجرا می شود. بنابراین کلیک ها و تایپ ها جلوتر اجرا می شوند و رابط کاربری روان می ماند.

ترنزیشن در React را کجا استفاده نکنیم؟

همه چیز نباید ترنزیشن شود. اگر کاربر روی دکمه «پرداخت» کلیک کرد، آن آپدیت مهم است و نباید با تأخیر بیاید. همین طور تایپ در فرم ورود.

نکته: قانون ساده این است: چیزهایی که چشم کاربر مستقیم می بیند و انتظار پاسخ لحظه ای دارد، نباید داخل startTransition برود.

گام به گام: تمرین ترنزیشن در React

برای تمرین، مثل پروژه مدرسه، این مراحل را انجام بده:

1. یک پروژه ساده React بساز که فقط یک input و یک متن دارد.
2. اول بدون useTransition، تایپ را به state متصل کن و ببین چه می شود.
3. حالا یک لیست بزرگ مثل مثال SearchResults اضافه کن.
4. اگر کند شد، useTransition را اضافه کن و رندر لیست را داخل startTransition بگذار.
5. در پایان، پیام isPending را هم برای تجربه بهتر کاربر نشان بده.

اگر بخش مسیریابی (Router) در React را هم دیده باشی، می توانی این جست وجو را در یک صفحه جدا بسازی و بین صفحات با Router جابه جا شوی. بعدا در صفحه ترنزیشن در React می توانی مثال های پیچیده تر لیست و فیلتر را اضافه کنی.

جمع بندی سریع ترنزیشن ها در React

• useTransition برای آپدیت های سنگین و غیر فوری استفاده می شود.
• آپدیت های فوری مثل تایپ نباید داخل startTransition بروند.
• isPending وقتی true است، می توانی پیام «در حال بارگذاری» نشان بدهی.
• ترنزیشن در React کمک می کند رابط کاربری حتی زیر بار سنگین روان بماند.
• این الگو برای جست وجو، فیلتر و لیست های بزرگ عالی است.