React 19

 (github.com/facebook)
2 điểm bởi GN⁺ 2024-12-06 | 1 bình luận | Chia sẻ qua WhatsApp

19.0.0 (ngày 5 tháng 12 năm 2024)

Tính năng mới

React
  • Actions: startTransition giờ có thể chấp nhận các hàm bất đồng bộ. Các hàm này được gọi là "Actions", cập nhật trạng thái ở nền và commit UI trong một lần. Actions có thể thực hiện các side effect như yêu cầu bất đồng bộ, và sẽ chờ công việc hoàn tất trước khi Transition kết thúc.
  • useActionState: Hook mới cho phép sắp xếp Actions trong Transition và truy cập trạng thái. Nhận trạng thái ban đầu và reducer.
  • useOptimistic: Hook mới để cập nhật trạng thái trong khi Transition đang diễn ra. Khi Transition hoàn tất, trạng thái sẽ được cập nhật thành giá trị mới.
  • use: API mới để đọc tài nguyên trong lúc render. Chấp nhận Promise hoặc Context; nếu cung cấp Promise, quá trình sẽ bị tạm dừng cho đến khi giá trị được resolve.
  • Dùng ref như một prop: Có thể dùng ref như một prop mà không cần forwardRef.
  • Prewarming các sibling của Suspense: Khi component bị tạm dừng, React sẽ ngay lập tức commit phần fallback của ranh giới Suspense gần nhất.
React DOM client
  • Prop action của <form>: Form Actions tự động quản lý form và tích hợp với useFormStatus. Tự động reset form khi thành công.
  • Hỗ trợ metadata tài liệu: Có thể render native các thẻ metadata của tài liệu từ component.
  • Hỗ trợ stylesheet: Chèn stylesheet vào <head> của client trước khi hiển thị nội dung của ranh giới Suspense.
  • Hỗ trợ script bất đồng bộ: Có thể render script bất đồng bộ ở bất kỳ đâu trong cây component.
React DOM server
  • Thêm API prerender và prerenderToNodeStream: API cho tạo site tĩnh, được thiết kế để hoạt động trong các môi trường streaming như Node.js stream và web stream.
React Server Components
  • Tính năng RSC: Directive, server component và server function đã được ổn định. Các thư viện có chứa server component giờ có thể nhắm React 19 làm peer dependency.

Sắp bị loại bỏ

  • Truy cập element.ref: Loại bỏ việc truy cập element.ref, ưu tiên element.props.ref.
  • react-test-renderer: Trong React 19, react-test-renderer sẽ ghi cảnh báo deprecation và chuyển sang concurrent rendering để dùng trên web.

Thay đổi lớn

React
  • Bắt buộc dùng JSX transform mới: Cần JSX transform mới để cải thiện kích thước bundle và cho phép dùng JSX mà không cần import React.
  • Lỗi render không bị throw lại: Nếu lỗi không bị Error Boundary bắt, nó sẽ được báo qua window.reportError.
  • Loại bỏ propTypes: Việc dùng propTypes sẽ bị bỏ qua một cách im lặng. Khuyến nghị chuyển sang TypeScript.
  • Loại bỏ defaultProps của function: Có thể dùng tham số mặc định của ES6 thay thế.
  • Loại bỏ string refs: Cần migrate việc dùng string refs sang ref callback.
React DOM
  • Loại bỏ react-dom/test-utils: act được chuyển từ react-dom/test-utils sang react. Các utility khác bị loại bỏ.
  • Loại bỏ ReactDOM.render, ReactDOM.hydrate: Được thay thế bằng ReactDOM.createRoot và ReactDOM.hydrateRoot cho concurrent rendering.

Những thay đổi đáng chú ý

React
  • Dùng <Context> làm provider: Có thể render <Context> làm provider thay cho <Context.Provider>.
  • Hỗ trợ custom element: React 19 vượt qua tất cả các bài kiểm tra custom element.
  • Thay đổi trong StrictMode: useMemo và useCallback sẽ tái sử dụng kết quả memoization của lần render đầu tiên.
React DOM
  • Diff cho lỗi hydration: Khi xảy ra mismatch, React 19 sẽ ghi một lỗi duy nhất bao gồm phần khác biệt của nội dung không khớp.

Thay đổi về TypeScript

  • Cấm implicit return: ref giờ chỉ chấp nhận cleanup function. Implicit return sẽ gây lỗi.
  • useRef cần đối số khởi tạo: Đối số khởi tạo giờ là bắt buộc.
  • Typing ReactElement nghiêm ngặt hơn: props của React element giờ mặc định là unknown thay vì any.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-12-06
Ý kiến trên Hacker News

  • Có ý kiến cho rằng việc dùng React để xây dựng các ứng dụng có thể mở rộng là khả thi và thú vị

    • Nhờ hỗ trợ TS và các thư viện cộng đồng nên có thể xây dựng và mở rộng một cách dễ dàng
    • Không hiểu vì sao các tính năng mới lại khiến mọi người sợ hãi
    • Có ý kiến cho rằng Jetpack Compose và Swift UI đã lấy cảm hứng từ React
    • Có người đặt câu hỏi liệu trước đây việc xây dựng các ứng dụng web quy mô lớn bằng jQuery hoặc plain JS có thật sự thú vị hay không

  • Có quan điểm tích cực về bản phát hành mới của React, nhưng cũng lo ngại rằng người mới bắt đầu có thể thấy khó tiếp cận

    • React vẫn là một framework xuất sắc và bản phát hành lần này có những cải tiến đáng giá
    • Sự chỉ trích không hẳn nhắm vào bản thân React mà là vào toàn bộ việc phát triển frontend nói chung

  • Có ý kiến cho rằng độ phức tạp của các framework phía client đang ngày càng tăng

    • Cảm thấy độ phức tạp đang tăng lên ở mọi nơi như backend, frontend, DevOps stack, v.v.

  • Đánh giá tích cực việc bản phát hành mới bổ sung tính năng ref as a prop, giúp không còn cần forwardRef

  • Nhắc đến Jotai, một bản clone của Recoil, thay cho Redux và cho biết nó tương thích với React 19

    • Cho rằng do độ phức tạp của frontend nên các trình quản lý trạng thái khác có thể trở thành vật cản

  • Có ý kiến hy vọng đổi tên API use

    • Cho rằng những người lần đầu tiếp xúc với React hooks có thể thấy khó hiểu

  • Đánh giá tích cực việc trì hoãn phát hành để giải quyết vấn đề suspense song song

  • Có người thắc mắc liệu có thể xây dựng hook useActionState dựa trên các hook tích hợp sẵn hiện có hay không

  • Đánh giá tích cực việc bổ sung các tính năng khuyến khích sử dụng công nghệ web tiêu chuẩn và các tính năng cải thiện chất lượng trải nghiệm

    • Thất vọng vì việc kích hoạt suspense vẫn cần sự hỗ trợ từ framework
    • Đã thử hiểu cơ chế suspense thông qua TanStack Query nhưng không thành công