useDeferredValue สำหรับหน่วงการรับข้อมูล

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

useDeferredValue คืออะไร

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// query updates immediately on keystroke
// deferredQuery updates when React has capacity

การนำไปใช้กับคอมโพเนนต์ที่ใช้ทรัพยากรมาก

function App() {
  const [q, setQ] = useState('');
  const dq = useDeferredValue(q);
  return (
    <>
      <input value={q} onChange={e => setQ(e.target.value)} />
      <HeavyList query={dq} /> {/* renders with deferred value */}
    </>
  );
}

การแสดงตัวบ่งชี้เนื้อหาเก่า

const isStale = q !== dq;
<div style={{ opacity: isStale ? 0.5 : 1 }}>
  <HeavyList query={dq} />
</div>

useDeferredValue เทียบกับการหน่วงแบบกำหนดเวลา

useDeferredValue เทียบกับ useTransition

// You own the state: use useTransition
startTransition(() => setTab(newTab));

// You receive the value: use useDeferredValue
const deferredProp = useDeferredValue(props.searchQuery);

การใช้ร่วมกับ React.memo

const HeavyList = React.memo(function({ query }) {
  // expensive rendering
  return <ul>{data.filter(q => ...).map(...)}</ul>;
});

ค่าที่หน่วงไว้ในการเรนเดอร์ครั้งแรก

ค่าที่หน่วงไว้หลายค่า

const deferredA = useDeferredValue(valueA);
const deferredB = useDeferredValue(valueB);

ข้อจำกัด

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

สรุป

บทถัดไป