რა არის concurrent ფიჩერები როგორიცაა useTransition და useDeferredValue?

Question

Accepted Answer

Concurrent React შეუძლია **შეწყვიტოს, დაპაუზოს და უპრიორიტეტობა მიეცეს** რენდერინგის მუშაობას. თქვენ აღნიშნავთ ზოგიერთ update-ს, როგორც **არა-სასწრაფო transitions**, ისე რომ სასწრაფო updates (მაგალითად, აკრეფა) დარჩეს რეაქციული მაშინაც კი, როდესაც მძიმე re-render დაკიდებულია.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**რატომ ეს ეხმარება:** დიდი სიის გაფილტვრა ძვირია. transition-ის გარეშე, React დაბლოკავს input-ს ათასი მწკრივის re-render-ის დროს, ამიტომ აკრეფა გრძელი გრძელი ჩანს. `startTransition`-ში ძვირი update-ის შეფუთვით, React ინარჩუნებს input update-ების მაღალ პრიორიტეტს და შეუძლია **გადაგდოს** მიმდინარე ფილტრის რენდერი, თუ სხვა გასაღები აიჭიროთ — არ იქნება მოძველებული, ღელვიანი frame-ები.

## useDeferredValue

მარტივი ალტერნატივა, როდესაც თქვენ არ აკონტროლებთ setter-ს — იგი გამოხმელს "ჩამორჩენილი" ღირებულების ასლს:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## როდის გამოიყენოთ

გამოიყენეთ ეს **ძვირი, არა-სასწრაფო UI update-ებისთვის**, რომლებიც გამოწვეულია სწრაფი მომხმარებლის input-ით: search-as-you-type დიდი მონაცემთა ნაკრებზე, ჩანართის ჩამრთავი, რომელიც რენდერ აკეთებს მძიმე კონტენტს, დიდი გაფილტრული/დალაგებული ცხრილი. მარტივი აპ-ებისთვის ისინი არ არის აუცილებელი — ისინი ბრწყინვების დაჩენან, როდესაც რენდერი საკმარისად მძიმეა მხედელი input lag-ის გამოწვევას.