Atom Turunan dan Atom Asinkron

Buat atom turunan dengan meneruskan fungsi pengambil: const doubleAtom = atom(get => get(countAtom) * 2). Atom ini tidak memiliki nilai tersimpan; atom ini menghitung ulang setiap kali countAtom berubah.

Atom turunan selalu diperbarui tanpa sinkronisasi manual. Atom ini merupakan padanan Jotai untuk properti terhitung.

Jotai melacak atom mana yang diakses di dalam fungsi pengambil dan secara otomatis mengevaluasi ulang atom turunan ketika salah satunya berubah. Anda tidak perlu mendeklarasikan dependensi secara eksplisit.

Jika fungsi pengambil memanggil get(atomA) dan get(atomB), atom turunan akan diperbarui setiap kali atomA atau atomB berubah.

Atom turunan yang dapat ditulis memiliki fungsi pengambil dan fungsi penyetel: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). Pembacaan menghasilkan nilai yang diubah; penulisan mengubah nilai lalu menyimpannya kembali.

Pola ini menerapkan transformasi data dua arah tanpa mengekspos atom dasar secara langsung.

Fungsi pengambil dapat bersifat asinkron: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai secara bawaan menerima Promise dari fungsi pengambil atom.

Ketika userIdAtom berubah, Jotai secara otomatis menjalankan kembali fungsi pengambil asinkron tersebut dan komponen yang menggunakannya ditangguhkan selama pengambilan data.

Atom asinkron terintegrasi dengan React Suspense secara mulus. Bungkus komponen yang menggunakannya dalam batas Suspense dengan tampilan cadangan. Komponen ditangguhkan saat Promise masih menunggu dan dirender ketika Promise selesai.

Hal ini menghilangkan kebutuhan untuk mengelola status pemuatan secara manual dalam komponen: tidak ada penanda isLoading dan tidak ada useEffect untuk mengambil data.

Impor loadable dari jotai/utils. Bungkus atom asinkron: const loadableUserAtom = loadable(userAtom). Komponen yang membaca loadableUserAtom menerima {state: 'loading'}, {state: 'hasData', data: user}, atau {state: 'hasError', error} tanpa mengalami penangguhan.

Gunakan loadable ketika Anda perlu menampilkan status pemuatan khusus secara langsung, alih-alih mengandalkan batas Suspense.

Utilitas atomWithReset dari jotai/utils membuat atom yang dapat diatur ulang ke nilai awalnya menggunakan simbol RESET. Cara ini lebih bersih daripada melacak dan menerapkan kembali nilai awal secara manual.

Dalam formulir, atur ulang semua atom bidang saat formulir dikirim atau dibatalkan dengan memanggil setiap fungsi penyetel menggunakan RESET dalam satu penangan.

Atom turunan dapat membaca beberapa atom lain: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Ini membuat satu referensi stabil yang diperbarui ketika dependensi mana pun berubah.

Komponen yang hanya memerlukan ringkasan cukup berlangganan ke summaryAtom, bukan ke ketiga atom secara terpisah.

Atom turunan dapat membaca atom yang berbeda secara bersyarat: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Saat modeAtom berganti, atom turunan tersebut secara otomatis berganti sumber datanya.

Jotai kembali berlangganan ke atom yang benar pada setiap evaluasi, sehingga tidak ada data lama dari cabang yang tidak aktif.

Jika fungsi pengambil atom asinkron melempar atau menolak, kesalahan diteruskan ke batas kesalahan React terdekat ketika digunakan bersama Suspense. Dengan loadable, kesalahan muncul di bidang state.error untuk ditangani langsung.

Selalu pasangkan atom asinkron dengan ErrorBoundary atau pembungkus loadable dalam kode produksi.

Atom turunan menyimpan hasil terakhirnya dalam memori. Jika semua atom dependensi mengembalikan nilai yang sama seperti pada evaluasi sebelumnya, atom turunan mengembalikan referensi yang sama dan tidak terjadi render ulang pada komponen hilir.

Untuk perhitungan turunan yang mahal, seperti transformasi larik besar, penyimpanan hasil ini memberikan manfaat kinerja yang signifikan tanpa konfigurasi tambahan.

Apa yang terjadi pada komponen yang membaca atom asinkron saat Promise-nya masih menunggu?

Atom turunan menghitung nilai dari atom lain menggunakan fungsi pengambil dengan pelacakan dependensi otomatis. Atom asinkron menggunakan fungsi pengambil asinkron dan secara bawaan terintegrasi dengan React Suspense; gunakan loadable dari jotai/utils untuk menonaktifkan Suspense dan menangani status pemuatan atau kesalahan secara langsung.

Atom turunan yang dapat ditulis memungkinkan transformasi dua arah, sedangkan atom bersyarat secara dinamis mengganti sumber data berdasarkan nilai atom lain.