ฮุคปรับปรุงประสิทธิภาพ useDeferredValue ใน React

useDeferredValue ซึ่งเป็นฮุคปรับปรุงประสิทธิภาพ เช่นเดียวกับ useTransition ช่วยให้การทำงานของอินเทอร์เฟซผู้ใช้เร็วขึ้น แต่ทำด้วยวิธีที่ต่างออกไปเล็กน้อย

ลองดูที่บทเรียนก่อนหน้า บทเรียน และดูว่าในกรณีของ useTransition เราห่อหุ้มฟังก์ชันการอัปเดต setFilterTerm อย่างไร โค้ดสำหรับอัปเดต state นั้นอาจจะไม่สามารถเข้าถึงได้เสมอไป มัน อาจจะถูกซ่อนอยู่ เช่น ในไลบรารี ที่คุณเชื่อมต่อ ในกรณีนี้เรา สามารถใช้ฮุค useDeferredValue ได้ จากนั้นเราต้อง ห่อหุ้ม state เอง หรือผลลัพธ์ ที่คำนวณโดยใช้ state นั้น เพื่อลดความสำคัญของมัน

มาวิเคราะห์โค้ดส่วนต่อไปนี้ของคอมโพเนนต์ลูก ProductList กัน:

import {useDeferredValue} from 'react'

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

โปรดทราบว่า ที่นี่เราห่อหุ้ม ตัวแปร products เองด้วย useDeferredValue ซึ่งเราได้มาจาก props ของคอมโพเนนต์ จากนั้นเราเขียน ผลลัพธ์ลงใน deferredProducts และจะทำงานต่อไปกับค่านี้:

const deferredProducts = useDeferredValue(products);

ทีนี้ หากในส่วนโค้ดของคอมโพเนนต์หลัก ที่เราพิจารณาในบทเรียนที่แล้ว เราเอาโค้ดบรรทัดนี้ออก:

const [isPending, startTransition] = useTransition();

และบรรทัดที่ใช้ isPending:

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

และเอาการห่อหุ้มออกจากฟังก์ชัน setFilterTerm เราจะได้ผลลัพธ์ เช่นเดียวกับในบทเรียนที่แล้ว:

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