React 19: Actions, RSC & Forms

เวอร์ชันที่ลบ boilerplate ทิ้ง

React 19 ไม่ได้เน้น syntax ใหม่ แต่เน้น ลบ pattern ที่คุณเคยต้องเขียนเองด้วยมือ ธีมที่วนซ้ำคือ: สิ่งที่คุณเคย wire เอง — loading flag, try/catch รอบการ submit, useMemo เต็มไปหมด, forwardRef wrapper — ตอนนี้ React ทำให้แทน

โมดูลนี้ครอบคลุมห้าการเปลี่ยนแปลงที่สำคัญที่สุดในการเขียน code ประจำวัน

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

บทเรียน	สิ่งที่คุณจะได้เรียน
Server Components	component ที่รันบน server, fetch ตรง ๆ และไม่ส่ง code ไป client
Actions & useActionState	async form action พร้อม pending/error state ในตัว
Forms & useOptimistic	`useFormStatus` และ optimistic UI แบบทันที
The React Compiler	auto-memoization ตอน build time ที่ทำให้ `useMemo`/`useCallback` แบบ manual เลิกจำเป็น

เส้นเรื่องหลัก

flowchart LR
  old["Before: you wrote it
loading flags · try/catch
useMemo everywhere · forwardRef"] --> r19["React 19"]
  r19 --> new["Now React does it
Actions + useActionState
Compiler auto-memo
ref as a prop"]

React 19: wiring ด้วยมือน้อยลง

นอกจากสี่หัวข้อในโมดูลนี้ ยังมีอีกสองการเปลี่ยนแปลงเล็ก ๆ ของ React 19 ที่เจอได้ทุกที่:

ref เป็น prop แล้ว function component รับ ref ได้ตรง ๆ — forwardRef ไม่จำเป็นสำหรับ code ใหม่อีกต่อไป (อยู่ในโมดูล Hooks)
use() hook อ่าน promise หรือ context และทำงานร่วมกับ Suspense (อยู่ในโมดูล Concurrent) เป็นครึ่งฝั่ง client ของเรื่อง Server Components