React 19

 (github.com/facebook)
2 คะแนน โดย GN⁺ 2024-12-06 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

19.0.0 (5 ธันวาคม 2024)

ฟีเจอร์ใหม่

React
  • Actions: ตอนนี้ startTransition รองรับฟังก์ชันแบบอะซิงก์แล้ว ฟังก์ชันเหล่านี้เรียกว่า "Actions" และจะอัปเดต state ในเบื้องหลังพร้อม commit UI ในครั้งเดียว Actions สามารถทำ side effects เช่นคำขอแบบอะซิงก์ได้ และจะรอให้งานเสร็จก่อนที่ Transition จะจบลง
  • useActionState: ฮุกใหม่ที่ใช้จัดลำดับ Actions ภายใน Transition และเข้าถึง state ได้ รับ initial state และ reducer
  • useOptimistic: ฮุกใหม่สำหรับอัปเดต state ระหว่างที่ Transition กำลังดำเนินอยู่ เมื่อ Transition เสร็จสิ้น state จะถูกอัปเดตเป็นค่าใหม่
  • use: API ใหม่ที่ใช้สำหรับอ่าน resource ระหว่างการเรนเดอร์ รองรับ Promise หรือ Context และหากส่ง Promise มา จะ suspend จนกว่าค่านั้นจะ resolve
  • ใช้ ref เป็น prop: สามารถใช้ ref เป็น prop ได้โดยไม่ต้องใช้ forwardRef
  • การ prewarm sibling ของ Suspense: เมื่อคอมโพเนนต์เกิดการ suspend React จะ commit fallback ของขอบเขต Suspense ที่ใกล้ที่สุดทันที
React DOM Client
  • prop action ของ <form>: Form Actions จะจัดการฟอร์มให้อัตโนมัติและทำงานร่วมกับ useFormStatus โดยจะรีเซ็ตฟอร์มอัตโนมัติเมื่อสำเร็จ
  • รองรับ document metadata: สามารถเรนเดอร์แท็ก metadata ของเอกสารจากคอมโพเนนต์ได้แบบเนทีฟ
  • รองรับ stylesheet: จะแทรก stylesheet เข้าไปใน <head> ของฝั่งไคลเอนต์ก่อนเปิดเผยเนื้อหาภายในขอบเขต Suspense
  • รองรับ async script: สามารถเรนเดอร์สคริปต์แบบอะซิงก์ได้จากที่ใดก็ได้ใน component tree
React DOM Server
  • เพิ่ม API prerender และ prerenderToNodeStream: เป็น API สำหรับการสร้าง static site ซึ่งออกแบบมาให้ทำงานในสภาพแวดล้อมแบบสตรีมมิง เช่น Node.js stream และ web stream
React Server Components
  • ความสามารถของ RSC: directives, server components และ server functions ถูกทำให้เสถียรแล้ว ไลบรารีที่มี server components สามารถตั้งเป้า React 19 เป็น peer dependency ได้แล้ว

การเลิกใช้งานในอนาคต

  • การเข้าถึง element.ref: เลิกใช้การเข้าถึง element.ref โดยแนะนำให้ใช้ element.props.ref แทน
  • react-test-renderer: ใน React 19 นั้น react-test-renderer จะบันทึกคำเตือนการเลิกใช้งาน และเปลี่ยนไปใช้ concurrent rendering สำหรับการใช้งานบนเว็บ

การเปลี่ยนแปลงสำคัญ

React
  • ต้องใช้ JSX transform ใหม่: จำเป็นต้องใช้ JSX transform แบบใหม่เพื่อปรับปรุงขนาด bundle และเพื่อให้ใช้ JSX ได้โดยไม่ต้อง import React
  • ข้อผิดพลาดระหว่างเรนเดอร์จะไม่ถูกโยนซ้ำ: หาก Error Boundary ไม่ได้จับข้อผิดพลาดไว้ ข้อผิดพลาดจะถูกรายงานไปที่ window.reportError
  • ลบ propTypes: การใช้ propTypes จะถูกเพิกเฉยแบบเงียบ ๆ แนะนำให้ย้ายไปใช้ TypeScript
  • ลบ defaultProps ของฟังก์ชัน: สามารถใช้พารามิเตอร์เริ่มต้นของ ES6 แทนได้
  • ลบ string refs: ต้องย้ายการใช้ string refs ไปเป็น ref callback
React DOM
  • ลบ react-dom/test-utils: ย้าย act จาก react-dom/test-utils ไปไว้ใน react ส่วนยูทิลิตีอื่น ๆ ถูกลบออก
  • ลบ ReactDOM.render, ReactDOM.hydrate: ถูกแทนที่ด้วย ReactDOM.createRoot และ ReactDOM.hydrateRoot สำหรับ concurrent rendering

การเปลี่ยนแปลงที่น่าสนใจ

React
  • ใช้ <Context> เป็น provider: สามารถเรนเดอร์ <Context> เป็น provider ได้แทน <Context.Provider>
  • รองรับ custom elements: React 19 ผ่านการทดสอบ custom elements ทั้งหมด
  • การเปลี่ยนแปลงใน StrictMode: useMemo และ useCallback จะนำผลลัพธ์ที่ memoize จากการเรนเดอร์ครั้งแรกกลับมาใช้ซ้ำ
React DOM
  • แสดงความแตกต่างสำหรับ hydration errors: หากเกิดความไม่ตรงกัน React 19 จะบันทึกข้อผิดพลาดเพียงรายการเดียวที่มีรายละเอียดความแตกต่างของเนื้อหาที่ไม่ตรงกัน

การเปลี่ยนแปลงใน TypeScript

  • ห้าม implicit return: ตอนนี้ refs รองรับเฉพาะ cleanup function เท่านั้น การคืนค่าแบบ implicit จะทำให้เกิดข้อผิดพลาด
  • ต้องมีอาร์กิวเมนต์เริ่มต้นของ useRef: ตอนนี้อาร์กิวเมนต์เริ่มต้นเป็นสิ่งจำเป็น
  • การพิมพ์ชนิด ReactElement ที่เข้มงวดขึ้น: ตอนนี้ props ของ React element จะตั้งต้นเป็น unknown แทน any

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-12-06
ความเห็นบน Hacker News

  • มีความเห็นว่าการใช้ React เพื่อสร้างแอปที่ขยายต่อได้เป็นทั้งสิ่งที่ทำได้จริงและสนุก

    • คิดว่าสามารถสร้างและขยายระบบได้อย่างง่ายดายด้วยการรองรับ TS และไลบรารีจากชุมชน
    • ไม่เข้าใจว่าทำไมฟีเจอร์ใหม่ ๆ ถึงทำให้ผู้คนรู้สึกหวาดกลัว
    • มีความเห็นว่า Jetpack Compose และ Swift UI ได้รับแรงบันดาลใจจาก React
    • ตั้งคำถามว่าในอดีตการสร้างเว็บแอปขนาดใหญ่ด้วย jQuery หรือ plain JS นั้นสนุกจริงหรือไม่

  • มีมุมมองเชิงบวกต่อรีลีสใหม่ของ React แต่ก็กังวลว่าผู้เริ่มต้นอาจเริ่มต้นได้ยาก

    • คิดว่า React ยังคงเป็นเฟรมเวิร์กที่ยอดเยี่ยม และรีลีสครั้งนี้ก็มีการปรับปรุงที่ดี
    • คำวิจารณ์ไม่ได้มุ่งที่ตัว React เอง แต่เป็นต่อการพัฒนาฝั่งฟรอนต์เอนด์โดยรวม

  • มีความเห็นว่าความซับซ้อนของเฟรมเวิร์กฝั่งไคลเอนต์กำลังเพิ่มขึ้น

    • รู้สึกว่าความซับซ้อนกำลังเพิ่มขึ้นทุกด้าน ทั้งแบ็กเอนด์ ฟรอนต์เอนด์ และสแตก DevOps

  • ประเมินในทางบวกว่ารีลีสใหม่นี้เพิ่มฟีเจอร์ ref as a prop เข้ามา ทำให้ไม่จำเป็นต้องใช้ forwardRef อีกต่อไป

  • มีการกล่าวถึง Jotai ซึ่งเป็นโคลนของ Recoil แทน Redux พร้อมระบุว่าสามารถใช้งานร่วมกับ React 19 ได้

    • คิดว่าด้วยความซับซ้อนของฟรอนต์เอนด์ ตัวจัดการสถานะอื่น ๆ อาจกลายเป็นตัวถ่วงได้

  • มีความเห็นว่าอยากให้เปลี่ยนชื่อ API use

    • คิดว่าคนที่เพิ่งเริ่มรู้จัก React hooks อาจสับสนได้

  • ประเมินในทางบวกต่อการเลื่อนรีลีสออกไปเพื่อแก้ปัญหา parallel suspense

  • มีข้อสงสัยว่าสามารถสร้าง hook useActionState โดยอิงจาก built-in hook ที่มีอยู่เดิมได้หรือไม่

  • ประเมินในทางบวกต่อการเพิ่มฟีเจอร์ที่ส่งเสริมการใช้เทคโนโลยีเว็บมาตรฐานและฟีเจอร์ที่ช่วยยกระดับคุณภาพการใช้งาน

    • รู้สึกผิดหวังที่การ trigger suspense ยังต้องอาศัยการรองรับจากเฟรมเวิร์ก
    • เคยพยายามทำความเข้าใจกลไก suspense ผ่าน TanStack Query แต่ไม่สำเร็จ