Τι είναι ταυτόχρονα χαρακτηριστικά όπως useTransition και useDeferredValue;

Question

Accepted Answer

Το Concurrent React μπορεί να **διακόψει, σταματήσει και δώσει προτεραιότητα** στο έργο απόδοσης. Σημειώνετε ορισμένες ενημερώσεις ως **μη επείγουσες μεταβάσεις**, ώστε οι επείγουσες ενημερώσεις (όπως η πληκτρολόγηση) να παραμείνουν ανταποκριτικές ακόμη και όταν υπάρχει μια βαριά επανάληψη απόδοσης.

## 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
```

**Γιατί αυτό βοηθά:** το φιλτράρισμα μιας τεράστιας λίστας είναι δαπανηρό. Χωρίς μια μετάβαση, το React θα μπλόκαρε την είσοδο ενώ θα απέδιδε χιλιάδες σειρές, επομένως η πληκτρολόγηση αισθάνεται αργή. Τυλίγοντας την ακριβή ενημέρωση σε `startTransition`, το React κρατά τις ενημερώσεις εισόδου υψηλής προτεραιότητας και μπορεί να **απορρίψει** μια εκτελούμενη απόδοση φίλτρου εάν πληκτρολογήσετε ένα άλλο πλήκτρο — χωρίς παλιά, τραγικά καρέ.

## useDeferredValue

Μια απλούστερη εναλλακτική όταν δεν ελέγχετε το setter — σας δίνει μια "καθυστερημένη" αντιγραφή μιας τιμής:

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

## Πότε να χρησιμοποιήσετε

Χρησιμοποιήστε αυτά για **ακριβές ενημερώσεις UI που δεν είναι επείγουσες** που κινούνται από γρήγορη εισαγωγή χρήστη: αναζήτηση-καθώς-πληκτρολογείτε σε μεγάλα σύνολα δεδομένων, εναλλαγή καρτελών που αποδίδουν βαρύ περιεχόμενο, μεγάλοι φιλτραρισμένοι/ταξινομημένοι πίνακες. Για απλές εφαρμογές είναι περιττές — λάμπουν όταν μια απόδοση είναι αρκετά βαριά για να προκαλέσει ορατή καθυστέρηση εισόδου.