2 thay đổi quan trọng của React: View Transitions và Activity

• React đã công bố các tính năng thử nghiệm mới
  • View Transitions giúp dễ dàng áp dụng hiệu ứng chuyển trang mượt mà
  • Activity cho phép tối ưu hiệu năng bằng cách ẩn UI và giữ nguyên trạng thái
• Ngoài ra, nhiều tính năng khác cũng đang được phát triển như xử lý phụ thuộc tự động, Fragment Refs, Concurrent Stores

Các đặc điểm chính của View Transitions

• Triển khai animation bằng cách tận dụng API trình duyệt startViewTransition mới được giới thiệu
• Có thể chỉ định phần tử nào sẽ được animate bằng <ViewTransition>, và dùng startTransition, useDeferredValue, Suspense... làm trigger
• Mặc định cung cấp animation cross-fade, và có thể tùy biến bằng CSS
• Cũng hỗ trợ shared element transitions, cho phép di chuyển tự nhiên giữa các phần tử có cùng thuộc tính name
• Cung cấp API addTransitionType để chỉ định animation khác nhau tùy theo nguyên nhân kích hoạt transition

Các đặc điểm chính của Activity

• Thông qua <Activity>, có thể ẩn UI và giữ nguyên trạng thái, hoặc prerender khi cần
• Ở chế độ ẩn, component sẽ unmount nhưng trạng thái vẫn được giữ lại, đồng thời độ ưu tiên render sẽ giảm xuống
• Có thể khôi phục mà không làm mất giá trị nhập hoặc trạng thái khi chuyển trang
• Trong tương lai, dự kiến sẽ bổ sung chế độ cho modal và tính năng xóa trạng thái để tiết kiệm bộ nhớ
• Ngay cả trong server-side rendering (SSR), Activity cũng hỗ trợ các hành vi tối ưu hóa

Các tính năng khác đang được phát triển

• React Performance Tracks

  • Đang phát triển tính năng thêm custom track dành riêng cho React vào trình phân tích hiệu năng của trình duyệt
  • Hiện vẫn đang giải quyết các vấn đề liên quan đến hiệu năng và kết nối với Suspense

• Xử lý phụ thuộc của effect tự động (Automatic Effect Dependencies)

  • Mục tiêu là dùng React Compiler để tự động chèn dependency cho useEffect, giúp mã gọn hơn và dễ hiểu hơn
  • Muốn định hướng tư duy theo Effect thay vì theo vòng đời của component

• Compiler IDE Extension

  • Đang phát triển tiện ích mở rộng IDE dựa trên React Compiler
  • Dự kiến cung cấp nhiều tính năng như tối ưu mã, phát hiện vi phạm quy tắc, hiển thị các dependency được tự động chèn

• Fragment Refs

  • Đang nghiên cứu tính năng Fragment Ref để có thể quản lý nhiều phần tử DOM bằng một Ref duy nhất
  • Mục đích là giúp việc gọi DOM API trở nên dễ dàng hơn

• Gesture Animations

  • Đang nghiên cứu mở rộng View Transition sang cả animation dựa trên cử chỉ chạm
  • Đang xử lý các vấn đề như chuyển động liên tục, xử lý thao tác chưa hoàn tất, và đảo ngược giữa DOM mới và DOM cũ

• Concurrent Stores

  • Mục tiêu là tích hợp store bên ngoài với React một cách tự nhiên theo mô hình Concurrent
  • Đang phát triển API kiểu use(store) mới để vượt qua các giới hạn của useSyncExternalStore