useTransition Hook — UI-ի թարմացում առանց UI-ի դանդաղեցման

useTransition-ը React 18-ի hook է, որը թույլ է տալիս React-ին տարբերակել՝ որ թարմացումները կարևոր (urgent) են, իսկ որոնք՝ ոչ այնքան կարևոր (non-urgent)։ Այսպիսով React-ը կարող է առաջնահերթություն տալ այն թարմացումներին, որոնք անմիջապես ազդում են օգտվողի փորձի վրա։

Օրինակ՝ օգտվողը գրում է search input-ում։ React-ը պետք է միաժամանակ․ 1️⃣ Թարմացնի input-ի արժեքը (urgent) 2️⃣ Ֆիլտրի հարյուրավոր տվյալներ ցուցակի մեջ (non-urgent)

Առանց useTransition-ի՝ input-ը կարող է “սառել” կամ ուշ արձագանքել։ useTransition-ը լուծում է հենց այս խնդիրը։

---

🔹 Syntax

const [isPending, startTransition] = useTransition();

• isPending — boolean արժեք, ցույց է տալիս՝ արդյոք non-urgent թարմացումը դեռ ընթացքի մեջ է։
• startTransition(callback) — ֆունկցիա, որի մեջ դնում ես այն state փոփոխությունը, որը ցանկանում ես նշել որպես “ոչ առաջնահերթ”։

---

📍 Օրինակ 1 — Search input-ի արագ արձագանք

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

export default function SearchList() {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState([]);
  const [isPending, startTransition] = useTransition();

  const items = Array.from({ length: 5000 }, (_, i) => `Element ${i + 1}`);

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

    startTransition(() => {
      const filteredItems = items.filter((item) =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFiltered(filteredItems);
    });
  };

  return (
    <div>
      <h2>🔎 Ֆիլտրման օրինակ useTransition-ով</h2>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Փնտրիր..."
      />
      {isPending && <p>Լիցքավորում...</p>}
      <ul>
        {filtered.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Այստեղ React-ը input-ի արժեքը թարմացնում է անմիջապես, իսկ ցուցակի filtering-ը կատարում է transition-ի շրջանակում՝ առանց UI-ի “սառելու”։ Եթե ֆիլտրման գործընթացը տևում է մի փոքր երկար, React-ը պահում է input-ի թարմացումը՝ անտեսանելի latency-ով։

---

📍 Օրինակ 2 — Քայլ առ քայլ բացատրություն

1. setQuery() — կատարվում է անմիջապես՝ urgent update
2. startTransition() — սկսում է non-urgent update (filtering)
3. React-ը նախ ցույց է տալիս input-ի նոր արժեքը, հետո միայն թարմացնում ցուցակը
4. isPending true է՝ մինչև filtering-ը ավարտվի

---

📍 Օրինակ 3 — Լիցքավորման ցուցադրում isPending-ի միջոցով

`isPending` արժեքը կարող ես օգտագործել՝ ցուցադրելու համար loader կամ skeleton։

{isPending ? (
  <p>Դիտակը նոր տվյալներ է բեռնում...</p>
) : (
  <List data={filtered} />
)}

Այնպես React-ը կարող է smoother ձևով փոխել տվյալները՝ առանց տեսանելի ցնցման։

---

📍 Օրինակ 4 — Transition + Pagination

Այս hook-ը նաև հիանալի է pagination-ի կամ tab-switching-ի դեպքում, երբ նոր էջի բովանդակությունը պետք է բեռնվի առանց UI-ի կարճ freeze-ի։

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

export default function PaginationExample() {
  const [page, setPage] = useState(1);
  const [isPending, startTransition] = useTransition();

  const handlePageChange = (newPage) => {
    startTransition(() => {
      setPage(newPage);
    });
  };

  return (
    <div>
      <h3>Էջ {page}</h3>
      <button onClick={() => handlePageChange(page - 1)} disabled={page === 1}>
        Նախորդ
      </button>
      <button onClick={() => handlePageChange(page + 1)}>
        Հաջորդ
      </button>
      {isPending && <p>Բեռնում է հաջորդ էջը...</p>}
    </div>
  );
}

Այստեղ UI-ն երբեք չի “սառչում” էջերի միջև անցնելիս։ React-ը նախ ցուցադրում է գործողության արդյունքը, հետո սկսում non-urgent update։

---

⚙️ Լավագույն պրակտիկաներ

• Օգտագործիր useTransition այն թարմացումների համար, որոնք կարող են մի փոքր ուշանալ։
• Միշտ պահիր input կամ UI interaction-ը անմիջական (urgent update)։
• Մի տեղադրիր network հարցումներ transition-ի մեջ՝ դրանք պետք է լինեն async logic-ում։
• Մի օգտագործիր transition-ը ամեն փոքր update-ի համար՝ դա performance gain չի տա։

---

🧠 Ինչ է իրականում անում React-ը

React-ը իրականացնում է Concurrent Rendering՝ թույլ տալով միաժամանակ ունենալ երկու rendering գործընթաց՝ մեկը առաջնահերթ (urgent), մյուսը՝ հետին պլանում (deferred)։ Այն “կասեցնում է” non-urgent rendering-ը, եթե նոր urgent գործողություն տեղի ունենա։

Սա React-ի մեծ նորարարություններից մեկն է, որը թույլ է տալիս գրել responsive UI՝ առանց հավելյալ throttling կամ debounce logic-ի։

---

🎯 Վարժություն (փորձիր ինքդ)

Գրիր կոմպոնենտ, որը․

1. Ունի search input և ցուցակ՝ 10,000 էլեմենտով։
2. Օգտագործում է useTransition՝ filtering-ի համար։
3. Ցույց է տալիս loader, երբ filtering-ը ընթացքի մեջ է։

Փորձիր տարբերությունը առանց useTransition-ի և տես՝ input-ը ինչպես է արձագանքում։ Արդյունքը ակնհայտ է 💨։

---

📘 Ամփոփում

• useTransition — React 18-ի hook է non-urgent update-ների համար։
• Օգնում է smoother UI-ին՝ առանց input lag-ի։
• Վերադարձնում է [isPending, startTransition]։
• Կիրառիր filtering, pagination, search կամ heavy rendering սցենարներում։

---