ฮุกเพิ่มประสิทธิภาพ useTransition ใน React

ฮุกเพิ่มประสิทธิภาพ useTransition ช่วยให้เราสามารถ อัปเดต state ได้โดยไม่ปิดกั้น UI

ด้วยฮุกนี้เราสามารถกำหนดให้ การอัปเดต state บางตัวมีลำดับความสำคัญต่ำ ซึ่งจะทำให้การอัปเดต state อื่นๆ มีลำดับความสำคัญสูงและทำงานโดยไม่ล่าช้า

ตัวอย่างเช่น การกรองรายการสินค้าในดรอปดาวน์ ขณะที่ผู้ใช้ป้อนอักขระในช่อง ค้นหา แน่นอนว่ารายการอาจแสดงผล ด้วยความล่าช้าบ้าง แต่เราไม่อยาก ให้การป้อนอักขระในช่องค้นหามี ความล่าช้า

มาดูกันว่าในกรณีเช่นนี้ ฮุก useTransition จะช่วยเราได้อย่างไร สมมติว่าเรามีโค้ดส่วนหนึ่งของคอมโพเนนต์หลัก มาวิเคราะห์กัน:

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 มีค่าบูลีนและแสดงให้เห็นว่า กระบวนการอัปเดตเสร็จสิ้นหรือไม่ ส่วน startTransition คือฟังก์ชันที่ ช่วยลดลำดับความสำคัญของการอัปเดต:

const [isPending, startTransition] = useTransition();

นอกจากนี้เรายังมี state filterTerm ซึ่งเก็บคำที่ป้อนลงใน ช่องอินพุตและฟังก์ชัน setFilterTerm สำหรับตั้งค่า:

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

เมื่อป้อนอักขระในอินพุต ทุก ครั้งจะเรียกฟังก์ชัน updateFilterHandler ซึ่งมีการอัปเดต filterTerm ที่นี่เราใช้ ฮุก 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>
);