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

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

Ρίξτε μια ματιά στο προηγούμενο μάθημα και δείτε, πώς στην περίπτωση του useTransition τυλίγαμε τη συνάρτηση ενημέρωσης setFilterTerm. Λοιπόν, ο κώδικας ενημέρωσης της κατάστασης (state) δεν είναι πάντα διαθέσιμος. Μπορεί να είναι κρυμμένος, για παράδειγμα, σε μια βιβλιοθήκη που έχετε συμπεριλάβει. Σε αυτήν την περίπτωση, μπορούμε να χρησιμοποιήσουμε το hook useDeferredValue. Τότε πρέπει να τυλίξουμε είτε την ίδια την κατάσταση, είτε το αποτέλεσμα που υπολογίζεται χρησιμοποιώντας αυτήν την κατάσταση, μειώνοντας έτσι την προτεραιότητά της.

Ας αναλύσουμε το ακόλουθο απόσπασμα κώδικα του θυγατρικού στοιχείου ProductList:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Παρατηρήστε ότι εδώ τυλίξαμε στο useDeferredValue την ίδια τη μεταβλητή products, την οποία πήραμε από τα props του στοιχείου. Στη συνέχεια, καταγράψαμε το αποτέλεσμα στο deferredProducts, με το οποίο θα δουλέψουμε στη συνέχεια:

const deferredProducts = useDeferredValue(products);

Τώρα, εάν στο απόσπασμα κώδικα του κύριου στοιχείου, που εξετάσαμε στο προηγούμενο μάθημα, αφαιρέσουμε τη γραμμή:

const [isPending, startTransition] = useTransition();

Και τη γραμμή με τη χρήση του isPending:

{isPending && <p>updating ...</p>}

Και επίσης αφαιρέσουμε το τύλιγμα από τη συνάρτηση setFilterTerm, τότε θα πάρουμε το ίδιο αποτέλεσμα, όπως στο προηγούμενο μάθημα:

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