Το Hook Βελτιστοποίησης Απόδοσης useTransition στο React

Το hook βελτιστοποίησης απόδοσης useTransition μας επιτρέπει να ενημερώνουμε τα states χωρίς να μπλοκάρουμε το γραφικό περιβάλλον.

Με τη βοήθεια αυτού του hook, μπορούμε να ορίσουμε σε μια ενημέρωση ενός state χαμηλή προτεραιότητα, κάτι που θα επιτρέψει στις ενημερώσεις άλλων states να έχουν υψηλή προτεραιότητα και να εκτελούνται χωρίς καθυστερήσεις.

Ως παράδειγμα, μπορούμε να αναφέρουμε τη φιλτράρισμα μιας αναπτυσσόμενης λίστας προϊόντων κατά την εισαγωγή χαρακτήρων από τον χρήστη στο πεδίο αναζήτησης. Φυσικά, η ίδια η λίστα μπορεί να εμφανίζεται με κάποια καθυστέρηση, αλλά δεν θα θέλαμε οι χαρακτήρες να εισάγονται στο πεδίο αναζήτησης με καθυστέρηση.

Ας δούμε πώς σε τέτοιες περιπτώσεις μπορεί να μας βοηθήσει το hook useTransition. Ας υποθέσουμε ότι έχουμε ένα κομμάτι κώδικα του κύριου component. Ας το αναλύσουμε:

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

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Εδώ βλέπουμε δύο μεταβλητές για το useTransition. Η μεταβλητή isPending περιέχει μια boolean τιμή και δείχνει αν η διαδικασία ενημέρωσης έχει ολοκληρωθεί, ενώ η startTransition είναι η συνάρτηση που επιτρέπει τη μείωση της προτεραιότητας της ενημέρωσης:

const [isPending, startTransition] = useTransition();

Επίσης, έχουμε το state filterTerm, στο οποίο αποθηκεύεται η έκφραση που πληκτρολογείται στο πεδίο εισαγωγής και τη συνάρτηση setFilterTerm για τον ορισμό της:

const [filterTerm, setFilterTerm] = useState('');

Κατά την εισαγωγή χαρακτήρων στο input, κάθε φορά καλείται η συνάρτηση updateFilterHandler, στην οποία συμβαίνει η ενημέρωση του filterTerm. Ακριβώς εδώ εφαρμόζουμε το hook useTransition, τυλίγοντας τη συνάρτηση ορισμού setFilterTerm μέσα στο startTransition ως εξής:

function updateFilterHandler(event) {
	startTransition(() => {
		setFilterTerm(event.target.value);
	});
}

Έτσι, ορίσαμε για την ενημέρωση του state filterTerm χαμηλή προτεραιότητα και το πεδίο εισαγωγής μας παραμένει ανταποκρινόμενο.

Μέσω της μεταβλητής isPending μπορούμε να δείξουμε στον χρήστη ότι η ενημέρωση της λίστας βρίσκεται ακόμα σε εξέλιξη. Ας εμφανίσουμε αυτή την πληροφορία κάτω από το πεδίο εισαγωγής, ενώ η λίστα ενημερώνεται:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>updating ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);