2 Perubahan Penting di React: View Transitions dan Activity

• React mengumumkan fitur eksperimental baru
  • View Transitions memudahkan penerapan animasi transisi halaman yang mulus
  • Activity memungkinkan optimasi performa dengan menyembunyikan UI dan mempertahankan state
• Selain itu, pengembangan berbagai fitur seperti penanganan dependensi otomatis, Fragment Refs, dan Concurrent Stores juga sedang berlangsung

Fitur utama View Transitions

• Mengimplementasikan animasi dengan memanfaatkan browser API startViewTransition yang baru diperkenalkan
• Dengan <ViewTransition>, kita bisa menentukan elemen mana yang akan dianimasikan, dan menggunakan startTransition, useDeferredValue, Suspense, dan lainnya sebagai pemicu
• Secara default menyediakan animasi crossfade, dan dapat dikustomisasi dengan CSS
• Juga mendukung shared element transitions, sehingga elemen dengan atribut name yang sama dapat berpindah secara alami
• Menyediakan API addTransitionType yang memungkinkan penentuan animasi berbeda berdasarkan penyebab transisi (cause)

Fitur utama Activity

• Melalui <Activity>, UI dapat disembunyikan sambil mempertahankan state, atau diprerender bila diperlukan
• Dalam mode tersembunyi, komponen di-unmount tetapi state tetap dipertahankan, dan prioritas render menjadi lebih rendah
• Saat berpindah halaman, nilai input atau state dapat dipulihkan tanpa hilang
• Ke depannya, mode untuk modal atau fitur penghapusan state demi penghematan memori juga direncanakan akan ditambahkan
• Activity juga mendukung perilaku optimasi pada server-side rendering (SSR)

Fitur lain yang sedang dikembangkan

• React Performance Tracks

  • Sedang dikembangkan fitur untuk menambahkan custom track khusus React ke browser performance profiler
  • Saat ini masih menyelesaikan masalah performa dan koneksi Suspense

• Automatic Effect Dependencies

  • Menargetkan penggunaan React Compiler untuk menyisipkan dependensi useEffect secara otomatis demi meningkatkan keringkasan dan kemudahan pemahaman kode
  • Ingin mendorong pola pikir yang berpusat pada Effect, bukan pada siklus hidup komponen

• Compiler IDE Extension

  • Sedang dikembangkan ekstensi IDE berbasis React Compiler
  • Direncanakan menyediakan berbagai fitur seperti optimasi kode, deteksi pelanggaran aturan, dan penandaan dependensi yang disisipkan otomatis

• Fragment Refs

  • Sedang diteliti fitur Fragment Ref agar beberapa elemen DOM bisa dikelola dengan satu Ref
  • Tujuannya adalah mempermudah pemanggilan DOM API

• Gesture Animations

  • Sedang dilakukan riset untuk memperluas View Transition ke animasi berbasis gestur sentuh
  • Masalah seperti gerakan berkelanjutan, penanganan aksi yang belum selesai, serta pembalikan antara DOM baru dan DOM lama sedang diatasi

• Concurrent Stores

  • Bertujuan mengintegrasikan external store secara alami dengan React dalam pendekatan concurrent
  • Sedang dikembangkan API baru bergaya use(store) yang melampaui keterbatasan useSyncExternalStore