Concurrent React & Suspense

ไม่ใช่ทุก update จะเร่งด่วนเท่ากัน

React รุ่นเก่า render ทุก update แบบ synchronous จนจบ — พอเริ่มแล้วหยุดไม่ได้ ดังนั้น re-render ก้อนใหญ่จะ block browser และทำให้พิมพ์หนืด Concurrent React เปลี่ยนเรื่องนี้: การ render กลายเป็นสิ่งที่ interrupt ได้ React เริ่ม render update หนึ่ง แล้วหยุดไว้เพื่อจัดการงานที่ด่วนกว่า แล้วค่อยกลับมา render ต่อได้

แนวคิดคือ update บางอย่าง urgent (พิมพ์ลง input ต้องรู้สึกทันที) และบางอย่าง non-urgent (filter list ยักษ์ใหม่, โหลดหน้าใหม่) concurrent features ให้คุณบอก React ว่าอันไหนเป็นอันไหน เพื่อให้งาน urgent ไม่ถูก block ด้วยงานหนัก

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Transitions	`useTransition` และ `useDeferredValue` — ทำให้ UI responsive
Suspense & lazy	loading UI แบบ declarative และ code-splitting ด้วย `React.lazy`
Error boundaries	จับ render error และจับคู่กับ Suspense
use() & data fetching	`use()` hook ของ React 19 และ render-as-you-fetch

mental model เดียวที่ต้องจำ

flowchart TB
  urgent["Urgent update
(keystroke)"] --> render1["render ทันที
(ไม่ถูก block)"]
  nonurgent["Non-urgent update
(filter list ใหญ่)"] --> render2["render เบื้องหลัง
(interrupt ได้)"]
  urgent -.interrupt.-> render2

urgent update แทรก non-urgent update ได้

คุณ mark update ที่หนักเป็น non-urgent (เรียกว่า transition) แล้ว React จะ render update นั้นเบื้องหลังในที่ที่ keystroke แทรกได้ ส่วน Suspense จัดการกรณีที่บางส่วนของ tree ยังไม่พร้อม (กำลังโหลด data หรือ code) โดยแสดง fallback แบบ declarative แทนที่คุณจะต้องมานั่งจัดการ loading boolean เอง