Glossary
ศัพท์ของ React เพิ่มขึ้นเรื่อย ๆ — useEffectEvent กับ <Activity> มาใน 19.2 ส่วน <ViewTransition> กับ addTransitionType มาใน 19.3 และตอนนี้ forwardRef ก็อยู่บนเส้นทางที่ประกาศไว้แล้วว่าจะ deprecate เวลาอ่านบทเรียนแล้วเจอคำที่ไม่คุ้น หรือไม่แน่ใจว่ายังใช้ได้อยู่กับ React 19.3 ไหม ให้กลับมาดูที่นี่ เราคง term ภาษาอังกฤษไว้ตามที่ developer ใช้จริง แล้วอธิบายความหมายเป็นภาษาไทย
| Term | ความหมาย | บทเรียน |
|---|---|---|
| act | helper ของ React/RTL ที่ flush การ render, effect และ microtask ให้เสร็จก่อนที่ assertion จะรัน ทำให้ test เห็น DOM แบบเดียวกับที่ browser จะเห็นหลัง update นิ่งแล้ว — render/fireEvent/userEvent จาก Testing Library ห่อ act ให้เราอยู่แล้วในแทบทุกกรณีที่คอร์สนี้เขียน | Testing |
| Actions | async function ที่ส่งให้ <form action={fn}> (หรือส่งให้ startTransition) React จะเรียกมันพร้อม FormData ที่ผู้ใช้กรอก จัดการ pending state ให้ และ reset field ที่เป็น uncontrolled ให้อัตโนมัติเมื่อสำเร็จ — ไม่ต้องมี onSubmit, preventDefault หรือประกอบ FormData เอง | Actions & useActionState |
<Activity> | component จาก React 19.2 ที่ซ่อน subtree ด้วย display: none พร้อมเลิก (tear down) Effect ของมันเหมือนกับ unmount จริง ๆ — แต่ต่างจาก unmount ตรงที่ state ยังอยู่ ดังนั้นเมื่อกลับมา mode="visible" ทีหลัง ค่า useState เดิมจะยังอยู่ครบ พร้อม Effect ที่ setup ใหม่ | Activity & View Transitions |
| addTransitionType | ติดชื่อ (เช่น "submit-comment") ให้ Transition ที่กำลังรันอยู่ เพื่อให้ prop enter/exit/update ของ <ViewTransition> ตอบสนองต่างกันได้ตามว่า Transition ไหนเป็นต้นเหตุของ update นั้น ถ้าเรียกนอก startTransition มันยังใส่ type ให้อยู่ดี แต่จะขึ้น warning | Activity & View Transitions |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| batching | การที่ React รวม setState หลายครั้งจาก event เดียวกันให้เหลือ re-render รอบเดียว ตั้งแต่ React 18 เรื่องนี้เกิดอัตโนมัติทุกที่ ทั้งใน promise, setTimeout และ event handler ของ browser เอง ไม่ใช่แค่ใน event handler แบบ synchronous ของ React — เรียก setter สามครั้งใน handler เดียวก็ยังได้ render แค่รอบเดียว | useState & Updates |
| cacheSignal | API จาก React 19.2 ที่ใช้ได้บน server เท่านั้น คืน AbortSignal ที่ยิงขึ้นเมื่อ React render เสร็จแล้ว ทำให้ fetch หรือ database call ที่อยู่ใน scope ของ cache() ยกเลิกตัวเองได้แทนที่จะทำงานต่อไปแบบไม่มีประโยชน์ — ใน Client Component มันคืน null เสมอ | use() & Data Fetching |
| children | prop ที่เก็บเนื้อหาที่ถูกวางซ้อนไว้ใน JSX tag — เป็น undefined ถ้าไม่มีลูกเลย, เป็นค่าดิบ ๆ ถ้ามีลูกเดียว หรือเป็น array ถ้ามีตั้งแต่สองขึ้นไป — อย่าสมมติว่ามันเป็น array เสมอ | JSX & Elements |
| commit phase | ครึ่งหลังของการ update: React เทียบ element tree ใหม่กับอันเก่า แล้วใช้เฉพาะการเปลี่ยนแปลง DOM ที่ reconciliation หาเจอ — เป็น phase เดียวที่ side effect (การเขียน DOM จริง) ทำได้ | Rendering & Reconciliation |
| component | function ที่รับ props (input แบบอ่านอย่างเดียวจาก parent) และ state ของตัวเอง แล้วคืนคำอธิบายของ UI — component เดียวกัน เรียกด้วย props/state ต่างกัน ต้องให้ output ต่างกันแบบแน่นอน (deterministic) ความแน่นอนนี้แหละที่ reconciliation และ compiler ต่างก็พึ่งพา | Why React & the Model |
ComponentProps | utility type ของ TypeScript ที่ “ขโมย” prop type ของ host element (หรือ component อื่น) มาใช้ — React.ComponentProps<'button'> ให้ prop ที่ถูกต้องของ <button> ทุกตัวโดยไม่ต้องเขียน type เองใหม่ | TypeScript with React |
| composition | กลไกการนำกลับมาใช้ใหม่ของ React แทนที่จะใช้ inheritance: ส่งเนื้อหาหรือพฤติกรรม เข้าไปใน component (ผ่าน children หรือ prop ที่เป็น slot ตั้งชื่อไว้) แทนการสืบทอด — component แบบทั่วไปไม่จำเป็นต้องรู้เลยว่ามันได้อะไรมา | Composition Patterns |
| compound components | กลุ่ม component (เช่น <Tabs><Tab/><TabPanel/></Tabs>) ที่ประสานงานกันผ่าน state ที่ใช้ร่วมกัน มักผ่าน context โดยผู้ใช้จัดวางชิ้นส่วนได้อิสระ — pattern นี้อยู่เบื้องหลัง library อย่าง Radix และ Headless UI | Composition Patterns |
Context / <Context> เป็น provider | ให้ parent ส่งค่าไปถึง descendant ทุกตัวได้โดยไม่ต้องส่ง prop ผ่านทุกชั้น ตั้งแต่ React 19 render context object ตรง ๆ เป็น provider ได้เลย (<ThemeContext value={theme}>) ไม่ต้องมี .Provider แม้ว่ารูปแบบเดิมจะยังใช้ได้อยู่ก็ตาม | Context |
| controlled / uncontrolled | input แบบ controlled คือ value ถูกขับเคลื่อนด้วย React state (value + onChange) ส่วน uncontrolled คือ value อยู่ใน DOM เอง (defaultValue แล้วอ่านผ่าน ref หรือ FormData) ทั้งสองแบบใช้ได้ทั้งคู่ — กติกาที่สำคัญคือห้ามสลับแบบให้ input เดิมระหว่างที่มันยังอยู่ ไม่งั้น React จะขึ้น console warning จริง ๆ | Lifting State & Composition |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| derived state | ค่าที่คำนวณตรงจาก props/state ที่มีอยู่แล้วตอน render (const fullName = first + ' ' + last) แทนที่จะ mirror ลง state ของตัวเองผ่าน useEffect ที่คอย sync — แบบ derived ไม่มีทางเก่า (stale) และไม่เสีย render เพิ่มเลย | Lifting State & Composition |
| effect cleanup | function ที่ effect คืนกลับมา รันก่อน setup รอบถัดไปของ effect เดียวกัน (ตอน dependency เปลี่ยน) และตอน unmount เพื่อยกเลิกสิ่งที่ effect เพิ่งตั้งไว้พอดี — ตัด connection, เคลียร์ timer, ถอด listener การลืมเขียนส่วนนี้คือสาเหตุอันดับหนึ่งของ connection ซ้ำซ้อนกับ memory leak | useEffect & Effects |
| element | object ธรรมดา ราคาถูก และ immutable ที่ JSX compile ออกมาเป็น ($$typeof, type, key, props) — มันคือ คำอธิบาย ของ UI ไม่ใช่ DOM node ที่มีชีวิตจริง state ของ component instance ต่างหากที่ reconciliation พยายามรักษาไว้ ข้าม element ที่ถูกสร้างทิ้งใหม่ทุก render | JSX & Elements |
| error boundary | class component (getDerivedStateFromError + componentDidCatch) ที่จับ error ที่ throw ระหว่าง render, lifecycle หรือ constructor ของ component ที่อยู่ข้างใต้มัน แล้วโชว์ fallback แทนที่จะ unmount ทั้งแอป — มันไม่จับ error ใน event handler หรือโค้ด async | Error Boundaries |
| eslint-plugin-react-hooks | lint plugin ทางการที่บังคับ Rules of Hooks และตั้งแต่ v6 ยังส่ง diagnostic ของ React Compiler เองมาด้วย (set-state-in-render, immutability, purity และอื่น ๆ) ในรูป ESLint error ธรรมดา จับ mutation ที่ compiler อาจ bail-out เงียบ ๆ ได้ | Rules & Custom Hooks |
| fallback | UI ที่ boundary <Suspense fallback={...}> โชว์ตอนที่มี child ข้างในกำลัง suspend — React จะสลับไปโชว์เนื้อหาจริงทันทีที่โค้ดหรือข้อมูลที่รอ resolve เสร็จ | Suspense & lazy |
| fiber | หน่วยงานภายในของ React สำหรับ component instance หนึ่งตัวระหว่างรอบ render/commit — เป็นโครงสร้างข้อมูลที่ทำให้ React หยุด, รันต่อ และจัดลำดับความสำคัญของการ render ได้ คอร์สนี้ต้องการแค่ส่วนแบ่ง render/commit ที่อยู่เหนือมัน ส่วนสถาปัตยกรรม fiber เองอยู่ในโมดูล internals | Rendering & Reconciliation |
| flushSync | บังคับให้ state update กับการ commit DOM ของมันเกิดขึ้นแบบ synchronous ก่อนที่บรรทัดถัดไปจะรัน — สำหรับกรณีหายาก (วัดขนาดทันทีหลังเพิ่ม item, dialog สั่งพิมพ์) ที่ต้องการให้ DOM อัปเดตทันที ใช้บ่อยเกินไปจะทำลาย batching และเสียประสิทธิภาพ | Refs, Portals & Escape Hatches |
| HOC (higher-order component) | function ที่รับ component เข้ามาแล้วคืน component ใหม่ที่ห่อไว้ — วิธีแชร์พฤติกรรมข้าม component แบบสมัยก่อนมี hook ปัญหาเรื้อรังสองอย่างของมัน คือลืม forward ref กับลืมตั้ง displayName นี่แหละคือเหตุผลที่ custom hook เข้ามาแทนที่การใช้ HOC ส่วนใหญ่ | Composition Patterns |
| hook (Rules of Hooks) | กฎสองข้อ — เรียก hook ที่ top level เท่านั้น (ห้ามอยู่ใน condition, loop หรือหลัง early return) และเรียกจาก component หรือ hook อื่นเท่านั้น — มีอยู่เพราะ React จับคู่แต่ละการเรียก hook กับ memory slot ตามลำดับการเรียก ถ้าผิดกฎจะเจอ error จริง ๆ “Rendered fewer hooks than expected” ไม่ใช่แค่ lint warning | Rules & Custom Hooks |
| hydrateRoot | จุดเริ่มต้นฝั่ง client ของ React 19 สำหรับเกาะกับ HTML ที่ render มาจาก server แล้ว (ต่างจาก createRoot ที่ render ใหม่ตั้งแต่ต้น) ทั้งคู่รับ option onCaughtError/onUncaughtError/onRecoverableError และ identifierPrefix เพื่อกันไม่ให้ค่า useId ของสองแอปที่แยกกันชนกันบนหน้าเดียว | Error Boundaries |
| hydration | ขั้นตอนที่ React ผูก event handler กับ state เข้ากับ HTML ที่ server render มาแล้วในฝั่ง browser โดยใช้ markup เดิมซ้ำแทนที่จะสร้างใหม่ — มันต้องการให้ render รอบแรกของ client ตรงกับผลลัพธ์ของ server เป๊ะ ๆ | External Stores |
| hydration mismatch | สิ่งที่เกิดขึ้นเมื่อ render รอบแรกของ client ให้ผลลัพธ์ต่างจาก HTML ที่ server render มาให้ React ซ่อมบางกรณีให้อัตโนมัติ (สังเกตได้ผ่าน onRecoverableError) แต่ mismatch ไม่เคยฟรี — มันคือสัญญาณว่า render สองรอบของ input เดียวกันให้ผลไม่ตรงกัน | External Stores |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| isPending | boolean ที่ทั้ง useTransition และ useActionState คืนออกมา เป็น true ตลอดช่วงชีวิตของ update ที่ห่อไว้ — รวมถึงข้าม await ใน callback ของ startTransition แบบ async ด้วย — ทำให้ปุ่มปิดตัวเองหรือโชว์ “Saving…” ได้โดยไม่ต้องเขียน loading state เอง | Transitions |
| JSX (automatic runtime) | syntax sugar ที่ compile ผ่าน automatic runtime สมัยใหม่ ออกมาเป็นการเรียก jsx(type, props) ที่ import จาก react/jsx-runtime — JSX เป็น expression ของ JavaScript ดังนั้น { } ข้างในมันก็แค่กลับไปเป็น JS ธรรมดา และไม่ต้อง import React แค่เพื่อจะใช้มันอีกต่อไป | JSX & Elements |
| key | identity ที่เสถียรและไม่ซ้ำกันในกลุ่มพี่น้อง (ควรเป็น id ของข้อมูล ไม่ใช่ index ของ array สำหรับ list ที่เรียงลำดับใหม่ได้) ที่ให้ reconciliation ติดตามได้ว่า item ไหนคือ item ไหนข้าม render — กลไกเดียวกันนี้ยังใช้เป็นสวิตช์ reset ได้ด้วย เปลี่ยน key ของ component เดี่ยว ๆ เพื่อบังคับให้ React ทิ้ง instance เก่าแล้ว mount ตัวใหม่ | Rendering & Reconciliation |
| lazy | React.lazy(() => import('./X')) แบ่ง component ออกเป็น chunk ของตัวเอง โหลดเฉพาะตอนที่มัน render ครั้งแรก แล้ว suspend จนกว่า chunk จะมาถึง — import ที่ล้มเหลวจะถูก cache ไว้ใน instance ของ lazy() ตัวนั้นตลอดไป ดังนั้นการ retry ต้องเรียก lazy() ใหม่ ไม่ใช่แค่ re-render ตัวเดิม | Suspense & lazy |
| lifting state up | ย้าย state ที่ใช้ร่วมกันไปไว้ที่ ancestor ร่วมที่ใกล้ที่สุดของ component ที่ต้องการมัน ทำให้มี single source of truth ตัวเดียว แล้วทั้งสอง component อ่าน/อัปเดตผ่าน props — เป็นทางแก้เริ่มต้นเมื่อ component สองตัวต้องซิงก์กัน | Lifting State & Composition |
| memo | React.memo(Component) ข้ามการ re-render component เมื่อ props ของมัน shallow-equal กับ render ก่อนหน้า — มันจะได้ผลก็ต่อเมื่อทุก prop มี reference เสถียรเท่านั้น ดังนั้น object/array/function prop แบบ inline ใหม่ทุกครั้งจะทำลายมันทุกครั้งเช่นกัน | Memoization & the Compiler |
| Object.is bail-out | การเทียบค่าแบบเดียวกัน (=== ที่แก้ edge case ของ NaN/-0 แล้ว) ที่ React ใช้ตัดสินว่า setState ครั้งนี้ต้อง render ใหม่ไหม — ตั้งค่าเดิมซ้ำ React จะข้าม render ไปเลย และเพราะมันเป็นการเทียบ reference การ mutate object แล้วส่ง reference เดิมกลับไปก็จะทำให้ข้าม render เหมือนกัน ทั้งที่ข้อมูลเปลี่ยนจริง | State Snapshot & Purity |
| onCaughtError / onUncaughtError / onRecoverableError | ตั้งแต่ React 19 เป็น option ที่ส่งให้ createRoot/hydrateRoot เพื่อสังเกต error ทุกตัวที่ React จัดการแบบรวมศูนย์ — ไม่ว่าจะถูกจับโดย boundary, ไม่มี boundary จับเลย หรือเป็น hydration mismatch ที่ React ซ่อมให้เงียบ ๆ — แทนที่จะพึ่ง console.error อย่างเดียว | Error Boundaries |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| polymorphic component | component ที่ render เป็น element ไหนก็ได้ตามที่ผู้ใช้เลือกผ่าน prop as (<Text as="a" href="...">, <Text as="button" onClick={...}>) โดย ComponentPropsWithoutRef<E> จะคำนวณ prop type ที่ถูกต้องเฉพาะของ element นั้นให้ตาม E ที่เลือก | Composition Patterns |
portal / createPortal | render children ไปยัง DOM node อื่น (ปกติคือ document.body สำหรับ modal หรือ tooltip ที่ต้องหนี parent ที่ clip มันไว้) แต่ยังอยู่ในตำแหน่งเดิมของ React tree ในทางตรรกะ — context ยังไหลเข้ามาได้ และ event ยัง bubble ผ่าน ancestor ฝั่ง React ไม่ใช่ ancestor ฝั่ง DOM | Refs, Portals & Escape Hatches |
| Profiler | component <Profiler id="..." onRender={...}> ที่ React เรียกหลัง commit ทุกครั้งข้างในมัน พร้อมตัวเลขจริง (phase, actualDuration, baseDuration) — วิธีวัดว่า subtree ไหน re-render บ่อยเกินไป แทนที่จะเดาเอา | Rendering Performance |
| props | input แบบอ่านอย่างเดียวที่ component ได้รับจาก parent — component ต้องไม่แก้ไข props ของตัวเอง และ props เดิม (พร้อม state เดิม) ต้อง render ผลลัพธ์เดิมเสมอ | Why React & the Model |
| purity | ข้อกำหนดที่ว่า render — ทุกอย่างที่ component ทำระหว่างคำนวณ JSX ที่จะคืนออกไป — ต้องให้ output เดิมสำหรับ props/state เดิม โดยไม่มีการ mutate และไม่มี side effect — การ memoize ของ React Compiler และ double-render ของ StrictMode ต่างพึ่งพาข้อนี้อยู่ | State Snapshot & Purity |
| React Compiler | เครื่องมือระดับ build time ที่ stable แล้ว (ตั้งแต่ [email protected]) วิเคราะห์โค้ดธรรมดาที่ไม่ได้ memoize เอง แล้วใส่สิ่งที่เทียบเท่า useMemo/useCallback/memo ให้อัตโนมัติ ในระดับที่ละเอียดกว่าโค้ดที่เขียนมือส่วนใหญ่ — มัน bail-out เงียบ ๆ กับ function ไหนก็ตามที่มันพิสูจน์ไม่ได้ว่าทำตาม Rules of React | The React Compiler |
react-dom/static (prerender) | API prerender/prerenderToNodeStream จาก entry point react-dom/static สร้าง HTML แบบ static ล้วนของ route หนึ่งโดยไม่มีขั้น interactive ฝั่ง client เลย ต่างจาก renderToPipeableStream ที่เป็นแบบ streaming — probe แบบ Vite ของคอร์สนี้ไม่ได้รัน static-export build จริง ดังนั้นให้มองว่านี่เป็นการชี้ทางที่ถูกต้อง มากกว่าข้อเท็จจริงที่พิสูจน์เองในคอร์ส | Production & Ecosystem |
| ReactNode vs ReactElement | ReactNode คือ type ที่กว้างที่สุดสำหรับ “อะไรก็ตามที่ render ได้” (JSX, string, number, array, null) — เหมาะกับ prop children; ReactElement แคบกว่า คือ object type จริงที่ JSX ประเมินออกมา เหมาะเวลาที่ค่าต้องเป็น element ที่ render แล้วตัวเดียวเท่านั้น ไม่ใช่อะไรก็ได้ที่ render ได้ | TypeScript with React |
| reconciliation | อัลกอริทึมที่ diff element tree ใหม่กับอันเก่า ในเวลา O(n) แทนที่จะเป็น O(n³) แบบไร้เดียงสา โดยใช้กฎสองข้อ: type เดิม จะเก็บ DOM node กับ state ไว้ อัปเดตแค่ prop ที่เปลี่ยน; type ต่างกัน จะ unmount subtree เก่าแล้ว mount ใหม่ ทำลาย state เดิมไปด้วย | Rendering & Reconciliation |
| ref (เป็น prop ใน React 19) | ตั้งแต่ React 19 ref เป็น prop ธรรมดาที่ function component ไหนก็ประกาศและใช้ตรง ๆ ได้เลย — ไม่ต้องใช้ forwardRef react.dev บอกตรง ๆ แล้วว่า forwardRef “จะถูก deprecate ในเวอร์ชันถัดไป” ดังนั้น component ใหม่ควรรับ ref เป็น prop ตั้งแต่แรก | JSX & Elements |
| ref callback cleanup | ตั้งแต่ React 19 ref ที่ให้เป็น callback function สามารถคืน cleanup function ได้ โดย React จะเรียกมันตอน ref หลุดออก หรือก่อนจะแนบ callback instance ใหม่ — วิธีเก่าที่เรียกซ้ำด้วย null แทน มีเอกสารระบุแล้วว่าจะถูกเอาออกในเวอร์ชันหน้า | useRef & the DOM |
| render phase | ครึ่งแรกของการ update: React เรียก component ของเราเพื่อสร้าง element tree ใหม่ เป็นการคำนวณล้วน ๆ — ไม่แตะ DOM เลย และ React หยุด, เริ่มใหม่ หรือทิ้งงานนี้ได้ — นี่แหละคือสิ่งที่ทำให้ concurrent rendering เป็นไปได้ | Rendering & Reconciliation |
| render prop | prop ที่ค่าของมันเป็น function ที่คืน JSX ให้ component แชร์ logic ได้ในขณะที่ผู้เรียกควบคุมการ render เอง (<MouseTracker render={({x,y}) => ...} />) ทุกวันนี้ custom hook ทำหน้าที่เดียวกันได้ตรงกว่า แต่ children แบบ function ก็ยังเป็นรูปแบบที่รอดมาและ type-safe อยู่ | Composition Patterns |
| renderToPipeableStream | API จาก react-dom/server ที่ stream HTML ที่ server render มาให้ client เป็นชิ้น ๆ ทันทีที่แต่ละส่วนพร้อม แทนที่จะรอทั้ง tree เสร็จ คู่กันฝั่ง client คือ hydrateRoot และการตั้ง identifierPrefix ให้ตรงกันทั้งสองฝั่งจะกันไม่ให้ useId ชนกันเมื่อมีมากกว่าหนึ่งแอปแชร์หน้าเดียวกัน | useId & Hook อื่น ๆ |
| requestFormReset | API ที่ใช้ได้เฉพาะใน Action (จาก react-dom) ที่ reset field แบบ uncontrolled ของฟอร์มแบบ imperative นอกเหนือจากตอน submit — เช่นปุ่ม “Clear” — ถ้าเรียกนอก Transition หรือ Action มันก็ยัง reset field ให้อยู่ดี แต่ React จะขึ้น console warning | Actions & useActionState |
| RSC payload | คำอธิบายแบบ serialize ของ Server Component tree ที่ render แล้ว (ชื่อไม่เป็นทางการว่า “Flight”) ที่ server ส่งให้ client แทนที่จะส่ง HTML string — React ฝั่ง client สร้าง Client Component ขึ้นใหม่จากมัน แล้วเสียบ output ที่ Server Component render ไว้แล้วเข้าไป นี่คือเหตุผลที่ props ที่ข้าม boundary นี้ต้อง serialize ได้ | Server Components |
| RTL (Testing Library) | React Testing Library — วิธีเทสต์ component ที่ครองตลาด: render, โต้ตอบด้วย userEvent แบบที่ผู้ใช้จริงจะทำ แล้ว query ด้วย role/label/text assert จากสิ่งที่มองเห็นได้ ไม่ใช่ internal state หรือว่า component เรียก hook อะไรบ้าง | Testing |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| Server Components | component ที่รันบน server เท่านั้น เป็น async และ fetch ข้อมูลตรง ๆ ได้เลย (ไม่ต้อง useEffect ไม่ต้องมี loading state) และไม่เคยส่งโค้ดของตัวเองไปที่ browser — client ได้รับแค่ RSC payload ที่ render แล้ว RSC ต้องใช้ผ่าน framework อย่าง Next.js App Router ไม่ใช่ React เปล่า ๆ กับ bundler | Server Components |
Server Functions / 'use server' | async function ที่ติด 'use server' (ที่ตัว function หรือทั้งไฟล์) ที่ Client Component เรียกได้ราวกับเป็น function local ทั้งที่จริงแล้วการเรียกมัน serialize argument แล้วยิง network request ไปให้ body จริงรันที่ server | Server Components |
| snapshot (state) | การอ่านตัวแปร state จะได้ค่าที่ถูกแช่แข็งไว้สำหรับ render รอบนี้เท่านั้น — เหมือนภาพถ่าย ไม่ใช่วิดีโอสด — แม้แต่จาก closure (เช่น callback ของ setTimeout) ที่มีชีวิตอยู่นานกว่า render ที่สร้างมันขึ้นมา; render รอบใหม่คือการเรียก component function ใหม่พร้อม snapshot ใหม่ | State Snapshot & Purity |
| startTransition | ทำเครื่องหมายว่า state update นี้ไม่เร่งด่วน ให้ React render มันแบบ background work ที่ interrupt ได้ ถ้ามี update ที่เร่งด่วนกว่า (เช่นการกดคีย์ครั้งถัดไป) มาถึง ตั้งแต่ React 19 callback ของมันเป็น async ได้ แต่มีแค่โค้ดก่อน await แรก (บวกกับอะไรที่ห่อกลับหลัง await อีกที) เท่านั้นที่นับเป็นส่วนหนึ่งของ Transition จริง ๆ | Transitions |
| StrictMode | wrapper ที่ใช้เฉพาะตอน development ที่ตั้งใจ render component สองรอบ และรัน effect setup→cleanup→setup หนึ่งรอบตอน mount เพื่อให้เจอ render ที่ไม่ pure กับ effect ที่ไม่ปลอดภัยทันที แทนที่จะปล่อยให้มันไปทำ state พังทีหลัง — มันไม่มีต้นทุนเลยตอน production เพราะทุกอย่างรันแค่รอบเดียว | Rendering & Reconciliation |
| Suspense | <Suspense fallback={...}> โชว์ loading UI แบบ declarative ให้ subtree — ไม่ต้องมี boolean isLoading เอง — ระหว่างที่ child ข้างในกำลัง suspend เพราะโค้ด (React.lazy) หรือข้อมูล (use()) แล้วสลับไปโชว์เนื้อหาจริงเมื่อมัน resolve | Suspense & lazy |
| Suspense boundary | ตัว wrapper <Suspense> เอง เป็นหน่วยที่ React ย้อนกลับไปหาเมื่อ descendant ตัวใดตัวหนึ่ง suspend — boundary ซ้อนกันได้เพื่อคุมระดับความละเอียดของ loading และการใส่ key ให้มันจะบังคับให้ fallback โชว์ใหม่เมื่อเนื้อหาเปลี่ยนจริง ๆ แทนที่จะปล่อยเนื้อหาเก่าค้างอยู่บนจอ | Suspense & lazy |
| tearing | การที่ component ต่างกันอ่านค่าจากแหล่งภายนอกเดียวกัน แล้วเห็นค่าไม่ตรงกันภายใน render เดียว — ตัวหนึ่งเห็นค่าเก่า อีกตัวเห็นค่าใหม่ — เป็นความเสี่ยงเฉพาะของ concurrent rendering ที่ useSyncExternalStore มีไว้เพื่อกันไม่ให้เกิดขึ้นเลย | External Stores |
| transition | state update ที่ถูกทำเครื่องหมายไว้ชัดเจนว่าไม่เร่งด่วน (ผ่าน startTransition/useTransition) เพื่อให้ React interrupt การ render แบบ background ของมันได้เมื่อมีอะไรเร่งด่วนกว่า มันเปลี่ยนแค่ ลำดับความสำคัญ ของ update ไม่เคยเปลี่ยนต้นทุนของมัน — งานคำนวณที่แพงจริง ๆ ก็ยังต้องการการ optimize ของตัวเองอยู่ดี | Transitions |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| updater function | รูปแบบ setX(x => ...) ของ state setter ซึ่ง React จะใช้กับค่า pending ล่าสุดแทนที่จะใช้ snapshot ที่แช่แข็งไว้ตอน render — เป็นทางแก้เวลาต้องเรียก setter ตัวเดิมมากกว่าหนึ่งครั้งใน event เดียว มันต้อง pure ด้วย เพราะ Strict Mode เรียกมันสองครั้งตอน development เพื่อตรวจสอบเรื่องนี้เป๊ะ ๆ | useState & Updates |
| use() | API จาก React 19 ที่อ่าน promise หรือ context ระหว่าง render — ถ้าส่ง promise ที่ยัง pending อยู่ มันจะ suspend component (โชว์ fallback ของ Suspense ที่ใกล้ที่สุด) จนกว่าจะ resolve และต่างจาก hook อื่น ตรงที่มันเรียกแบบมีเงื่อนไข ในลูป หรือหลัง early return ได้ | use() & Data Fetching |
'use client' | directive ที่ขีดเส้นบอกจุดที่โค้ดกลายเป็น Client Component — ไฟล์นั้นและทุกอย่างที่มัน import จะถูกส่งไปที่ browser และใช้ state, effect, event handler ได้ ซึ่ง Server Component ทำไม่ได้ | Server Components |
"use no memo" | directive ระดับ function ที่ทำให้ component นั้นหลุดออกจากการ compile ของ React Compiler ไปเลย แม้จะอยู่ใต้ mode 'infer' ที่เป็น default ก็ตาม — ใช้เป็นทางออกฉุกเฉินสำหรับ component ที่สงสัยว่า compiler จัดการผิด ระหว่างที่กำลังแก้การละเมิด Rules of React ที่ต้นตอ | The React Compiler |
| useActionState | ห่อ action แล้วคืน [state, formAction, isPending] โดยตัว action เองรับ (previousState, formData) แล้วคืน state ถัดไป ยุบ pattern เก่าที่ต้องมี useState แยกสำหรับข้อมูล + useState แยกสำหรับ loading + try/catch/finally ให้เหลือการเรียกครั้งเดียวที่ไม่มีทางลืม reset flag pending | Actions & useActionState |
| useCallback | cache identity ของ function ข้าม render จนกว่า dependency จะเปลี่ยน — คือ useMemo เฉพาะทางสำหรับ function มันจะช่วยกัน child re-render ได้ก็ต่อเมื่อจับคู่กับ component ที่ห่อด้วย React.memo แล้วเท่านั้น เพราะ reference ที่เสถียรอย่างเดียวไม่ทำอะไรกับ child ธรรมดา | Memoization in Practice |
| useDeferredValue | ให้ค่าหนึ่ง “ล้าหลัง” ระหว่างที่มีงานเร่งด่วนแทนที่จะบล็อกมัน โดยไม่มี delay ตายตัวเลย — React เริ่ม re-render แบบ background ทันทีที่รอบปัจจุบันเสร็จ แล้วเริ่มใหม่ถ้าถูกขัดจังหวะด้วยค่าที่ใหม่กว่า ตั้งแต่ React 19 มันรับ initialValue ที่ใช้เฉพาะ render แรกสุดเท่านั้น | Transitions |
| useEffect | ซิงก์ component เข้ากับสิ่งที่อยู่นอกการควบคุมของ React — connection, subscription, timer หรือ browser API — ผ่าน dependency array กับ cleanup ที่ต้องมี ถ้าเป้าหมายจริง ๆ คือ derive ข้อมูลหรือตอบสนอง event ก็แทบไม่ต้องใช้ effect เลยด้วยซ้ำ | useEffect & Effects |
| useEffectEvent | ออกมาเป็น stable ใน React 19.2: ดึงส่วนที่ไม่ reactive ของ effect ออกมาเป็น “Effect Event” ที่อ่านค่า props/state ล่าสุดเสมอ โดยไม่ตัวมันเองเป็น reactive dependency — ทางแก้เวลาต้องการค่าล่าสุดใน effect โดยไม่อยากบังคับให้ effect รันใหม่ทุกครั้งที่ค่านั้นเปลี่ยน | useEffect & Effects |
| useFormStatus | ให้ component (จาก react-dom) อ่านสถานะ pending ของ <form> ที่เป็น parent ใกล้ที่สุดได้โดยไม่ต้อง prop drilling เลย ต้องเรียกจาก component ที่เป็นลูกของฟอร์ม ไม่ใช่ component ที่ render tag <form> เอง ไม่งั้นมันจะรายงาน pending: false เงียบ ๆ ตลอด | Forms & useOptimistic |
| useId | สร้าง id string ที่ไม่ซ้ำและปลอดภัยกับ SSR ให้ component instance หนึ่งตัว ตรงกันระหว่าง HTML ที่ server render กับรอบ hydration ของ client — ตัวนับที่เขียนเองหรือ Math.random() รับประกันความตรงกันแบบนี้ไม่ได้ มันมีไว้สำหรับ id ของ accessibility attribute ไม่ใช่สำหรับ key ของ list | useId & Hook อื่น ๆ |
| useImperativeHandle | กำหนดว่า ref ของ parent เรียก method อะไรได้บ้างบน component แทนที่จะเปิด DOM node ดิบ ๆ ออกมาให้ — ตั้งแต่ React 19 มันประกอบกับ ref-เป็น-prop ได้ตรง ๆ ไม่ต้องมี wrapper forwardRef | useRef & the DOM |
| useInsertionEffect | ยิงก่อน layout effect ใด ๆ ทั้งหมด เพื่อให้ library แบบ CSS-in-JS แทรก <style> tag ได้ก่อนที่ useLayoutEffect จะอ่าน layout ที่ขึ้นกับ style นั้น react.dev ระบุตรง ๆ ว่ามันมีไว้สำหรับคนเขียน library CSS-in-JS ไม่ใช่โค้ดแอปทั่วไป | useId & Hook อื่น ๆ |
| useLayoutEffect | รันแบบ synchronous หลังจาก React commit การเปลี่ยนแปลง DOM แล้ว แต่ก่อนที่ browser จะ paint ทำให้การวัด layout ของ node ที่เพิ่ง commit แล้วขยับตำแหน่งทันที ไม่กระพริบให้เห็นแบบที่โค้ดเดียวกันใน useEffect (ซึ่งรันหลัง paint) อาจเกิดขึ้นได้ | Refs, Portals & Escape Hatches |
| useMemo | cache ค่าที่คืนกลับมาจากการคำนวณที่แพง คำนวณใหม่เฉพาะตอน dependency เปลี่ยน — ถ้าใช้ React Compiler แล้ว ส่วนใหญ่จะถูกใส่ให้อัตโนมัติ ดังนั้น useMemo แบบเขียนมือเก็บไว้ใช้กับโค้ดที่ compiler เข้าไม่ถึง หรือจุดที่ profiler ยังชี้ว่ามีปัญหาอยู่ | Memoization & the Compiler |
| useOptimistic | โชว์ผลลัพธ์ที่คาดว่าจะเกิดขึ้นทันที แล้วให้ React ย้อนกลับไปค่าจริงเองอัตโนมัติถ้า action แบบ async ล้มเหลว — ไม่ต้องเขียนโค้ด rollback เอง setter ของมันต้องรันอยู่ใน startTransition หรือ Action เท่านั้น ถ้าเรียกจาก event handler ธรรมดา React จะขึ้น warning แล้วค่าจะย้อนกลับทันที | Forms & useOptimistic |
| useReducer | รวม logic การเปลี่ยน state ที่หลายค่าต้องเปลี่ยนพร้อมกันไว้ใน function บริสุทธิ์ตัวเดียว (state, action) => nextState โดย dispatch ด้วยการอธิบายว่า เกิดอะไรขึ้น แทนที่จะคำนวณค่าถัดไปตรงจุดเรียก — เหมือนกับข้อกำหนดความ pure ของ reducer การ mutate แล้วคืน reference เดิมกลับไป ทำให้ React ข้าม re-render ไปเลยได้ | useReducer Patterns |
| useRef | ให้กล่อง { current } ที่ mutate ได้ อยู่รอดข้าม render โดยไม่ trigger render เมื่อมันเปลี่ยน — เหมาะกับค่าที่ต้องจำไว้แต่ไม่ต้องโชว์ (timer id, ค่าก่อนหน้า) และเข้าถึง DOM (focus, วัดขนาด) การอ่านหรือเขียน ref.current ระหว่าง render เอง แทนที่จะอยู่ใน event handler หรือ effect ถือเป็น bug จริง ๆ | useRef & the DOM |
| useState | คืนค่าปัจจุบันของ render รอบนี้ พร้อม setter ที่สั่ง re-render ด้วยค่าใหม่ — มันไม่เคย mutate snapshot ตรง ๆ เลย และ argument ของ setter จะถูกประเมินเป็น lazy initializer function เฉพาะ render แรกสุดเท่านั้น | useState & Updates |
| useSyncExternalStore | subscribe component เข้ากับ store ที่อยู่นอก React (global variable, browser API, library อย่าง Redux) โดยไม่เกิด tearing ให้ทุก consumer ได้ snapshot ที่สอดคล้องกันหนึ่งชุดต่อ render — getSnapshot ต้องคืนค่า primitive หรือ reference ที่ cache ไว้ ไม่งั้น object ใหม่ทุกครั้งจะทำให้เกิด infinite loop จริง ๆ | External Stores |
| useTransition | คืน [isPending, startTransition] — รูปแบบ hook ของการทำเครื่องหมายว่า update ไม่เร่งด่วน เวลาที่เราถือ state setter อยู่ตรงจุดเรียกเอง ถ้ามีแค่ค่า (เช่น prop) ที่ไม่มี setter ให้ห่อ ให้ใช้ useDeferredValue แทน | Transitions |
| Term | ความหมาย | บทเรียน |
|---|---|---|
<ViewTransition> | ห่อ subtree ไว้ เพื่อเวลามันเข้ามา ออกไป หรืออัปเดตระหว่าง Transition React จะสั่งให้ View Transition API ของ browser เองทำ animation ให้ มันออกมาพร้อมกับ React 19.3 เวอร์ชัน stable และไม่ throw เลยใน environment (เช่น jsdom) ที่ไม่มี API นี้ของ browser — มันแค่ render children แบบธรรมดาไม่มี animation | Activity & View Transitions |
| vitest | ตัวรัน test ที่ probe ของคอร์สนี้ใช้ คู่กับ React Testing Library — เร็ว เป็น native ของ Vite และเป็นตัวเลือก default คู่กับ (หรือแทนที่) Jest สำหรับโปรเจกต์ React + Vite สมัยใหม่ | Testing |