นากต้นฉบับเลื่อนกรอบหน้าเว็บสองใบผ่านรางเปลี่ยนฉากสีมิ้นต์บนโต๊ะสว่าง
reactjavascriptfrontendview-transitionsrelease

React 19.3 ทำ View Transitions และ Fragment Refs เป็น Stable: อัปเกรดแบบไม่ทำ motion พัง

พี่โชว์Engineering

React 19.3 ออกเมื่อ 9 กันยายน 2026 และเลื่อนสอง API ที่เคยเป็น experimental ให้เป็น stable ได้แก่ ViewTransition กับ Fragment refs การอัปเกรดรอบนี้จึงไม่ใช่แค่เปลี่ยนเลขเวอร์ชัน แต่เป็นจังหวะดีที่จะย้าย motion และ DOM integration ออกจาก abstraction ที่เขียนเองครับ

<ViewTransition> ครอบ element ที่ต้องการให้ React จัดการภาพเคลื่อนไหวตอน enter, exit, update หรือ share โดย animation จะทำงานเมื่อการเปลี่ยน state อยู่ใน Transition เช่น startTransition, การ reveal ของ Suspense หรือค่าจาก useDeferredValue งานเร่งด่วนที่ต้องตอบทันทีจะไม่ถูกหน่วงเพื่อเล่น motion

Fragment refs ช่วยให้ component ที่คืนหลาย DOM node ติดต่อกับกลุ่มลูกได้โดยไม่ต้องแทรก wrapper เพิ่ม เหมาะกับ layout, focus management และ observer ที่เดิมถูกบังคับให้เพิ่ม div เพื่อถือ ref แต่ควรตรวจ selector และ CSS ที่พึ่งโครงสร้าง DOM เก่าก่อนลบ wrapper

สิ่งที่ทีมควรทดลองทีละชั้น

  1. อัปเดต React และ React DOM พร้อมกัน แล้วรัน hydration test ก่อนเปิด API ใหม่
  2. เริ่ม ViewTransition จาก interaction เดียวที่ย้อนกลับได้ เช่น เปิด/ปิดการ์ด ไม่ครอบทั้งแอปทันที
  3. ทดสอบ prefers-reduced-motion และ browser ที่ยังไม่รองรับ View Transition API
  4. ใช้ Fragment refs เฉพาะจุดที่ wrapper เดิมสร้างปัญหา semantics หรือ layout
  5. เปิด Trusted Types ใน report-only ก่อนบังคับ policy บน production

React ระบุว่า ViewTransition ตอนนี้ทำงานเฉพาะ DOM และยังไม่รองรับ React Native ดังนั้น shared component ระหว่าง web กับ native ต้องเก็บ fallback เดิมไว้ ส่วน Server Components สามารถ render <Context> ที่ import จาก client module ได้ตรงขึ้น แต่ยังสร้าง Context ใน Server Component ไม่ได้

Recap

  • อัปเดต react และ react-dom เป็นชุดเดียวกัน
  • ทดลอง motion ใน flow เล็กและมี reduced-motion fallback
  • ตรวจ hydration, focus และ DOM selectors หลังเปลี่ยน Fragment refs
  • แยก API ที่ stable บน DOM ออกจากโค้ด React Native