concurrent features เช่น useTransition และ useDeferredValue คืออะไร?

Question

Accepted Answer

Concurrent React สามารถ **หยุด, ชั่วหนึ่ง, และกำหนดลำดับความสำคัญ** ของงาน rendering ได้ คุณทำเครื่องหมายอัปเดตบางอย่างเป็น **non-urgent transitions** เพื่อให้อัปเดตที่เร่งด่วน (เช่น การพิมพ์) ยังคงสามารถตอบสนองได้แม้ว่าการ re-render ที่หนักจะอยู่ในสถานะรอดำเนินการ

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

**ทำไมสิ่งนี้จึงช่วย:** การกรองรายชื่อขนาดใหญ่นั้นมีค่าใช้จ่าย หากไม่มี transition React จะบล็อกอินพุตขณะ re-render หลายพันแถว ดังนั้นการพิมพ์จึงรู้สึกถ้อยค้าง โดยการห่อหุ้มอัปเดตที่มีค่าใช้จ่ายในรหัสในรหัส `startTransition` React จะให้ความสำคัญสูงแก่อัปเดตอินพุต และสามารถ **throw away** rendering ที่กำลังดำเนินการได้หากคุณพิมพ์คีย์อื่น — ไม่มีเฟรมที่เก่า จิงจังขัดแวะ

## useDeferredValue

ทางเลือกที่ง่ายกว่าเมื่อคุณไม่ควบคุม setter — ให้คุณ "lagging" คัดลอกของค่า:

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

## เมื่อใช้

ใช้สิ่งเหล่านี้สำหรับ **expensive, non-urgent UI updates** ที่ขับเคลื่อนโดยอินพุตผู้ใช้ที่รวดเร็ว: search-as-you-type บนชุดข้อมูลขนาดใหญ่ การสลับแท็บที่เรนเดอร์เนื้อหาที่หนัก ตารางที่มีขนาดใหญ่ที่ได้รับการกรองและเรียงลำดับ สำหรับแอปแบบง่าย พวกเขาไม่จำเป็น — พวกเขาส่องเมื่อการเรนเดอร์หนักพอที่จะทำให้เกิดความล่าช้าของอินพุตที่เห็นได้ชัด