useTransition สำหรับการอัปเดต UI แบบไม่บล็อก

ยินดีต้อนรับ

ปัญหาการอัปเดตที่บล็อกการทำงาน

โหมดการเรนเดอร์พร้อมกันของ React

พื้นฐานของ useTransition

const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setInputValue(e.target.value); // urgent: update input immediately
  startTransition(() => {
    setFilteredList(filter(e.target.value)); // non-urgent
  });
};

ใช้ isPending แสดงส่วนติดต่อขณะโหลด

return (
  <>
    <input value={inputValue} onChange={handleChange} />
    {isPending && <Spinner />}
    <ResultList items={filteredList} />
  </>
);

สิ่งที่ควรอยู่ภายใน startTransition

// Correct
startTransition(() => setTab('heavy'));

// Wrong — async work outside React state
startTransition(async () => { await fetch(...); }); // not supported

startTransition โดยไม่ใช้ฮุก

import { startTransition } from 'react';

startTransition(() => setQuery(newValue));

ตัวอย่างการสลับแท็บ

const [tab, setTab] = useState('posts');
const [isPending, startTransition] = useTransition();

const selectTab = (t) =>
  startTransition(() => setTab(t));

useTransition เทียบกับ useDeferredValue

ไม่ใช่สิ่งทดแทนการปรับประสิทธิภาพ

ตรวจสอบความเข้าใจ

สรุป

บทถัดไป