Membaca dan Menulis Atom dengan useAtom

useAtom(someAtom) mengembalikan [value, setter], yang meniru API useState. value adalah status atom saat ini; setter memperbaruinya. Gunakan ini ketika sebuah komponen membaca sekaligus menulis atom.

Fungsi penyetel menerima nilai baru atau fungsi pembaru: setCount(c => c + 1).

useAtomValue(someAtom) hanya mengembalikan nilai saat ini, tanpa fungsi penyetel. Gunakan ini dalam komponen yang hanya menampilkan data, yang membaca status tetapi tidak pernah mengubahnya.

Karena komponen tidak menyimpan referensi fungsi penyetel, maksudnya terdokumentasi dengan jelas dalam kode: komponen ini adalah pembaca murni.

useSetAtom(someAtom) hanya mengembalikan fungsi penyetel. Yang penting, fungsi ini tidak membuat komponen berlangganan pada nilai atom. Komponen tidak pernah dirender ulang ketika atom berubah.

Gunakan ini untuk komponen yang hanya menangani tindakan, seperti tombol yang mengirimkan perubahan status tetapi tidak menampilkan antarmuka turunan apa pun.

Komponen yang memanggil useSetAtom(countAtom) untuk menambah penghitung tidak akan pernah dirender ulang ketika countAtom berubah karena komponen tersebut tidak memiliki langganan nilai. Hanya komponen yang menampilkan jumlah yang dirender ulang.

Ini adalah optimasi sederhana tetapi kuat: pisahkan penulis dari pembaca untuk mencegah render ulang berantai.

Impor atomWithStorage dari jotai/utils. Gunakan seperti atom(), tetapi teruskan kunci penyimpanan sebagai argumen pertama: atomWithStorage('theme', 'light'). Atom tersebut secara otomatis disinkronkan dengan localStorage.

Saat halaman dimuat ulang, atom mengambil data dari localStorage. Semua komponen yang membaca atom tersebut langsung menggunakan nilai yang tersimpan.

Simbol RESET dari jotai/utils dapat diteruskan ke fungsi penyetel atomWithStorage: setter(RESET). Tindakan ini menghapus entri localStorage dan mengatur ulang atom ke nilai awalnya.

Hal ini berguna untuk alur keluar atau tombol "atur ulang ke nilai bawaan" pada halaman pengaturan.

atomFamily dari jotai/utils membuat pabrik yang mengembalikan atom berparameter. Misalnya, atomFamily(id => atom(null)) membuat atom terpisah untuk setiap id unik yang diteruskan.

Ini ideal untuk status per item seperti selectedAtom(itemId) atau expandedAtom(rowId), tanpa perlu mengelola satu atom peta yang besar.

Keluarga atom dapat berkembang tanpa batas jika ID terus bertambah. Gunakan atomFamily.setShouldRemove((createdAt, param) => ...) untuk menentukan predikat pembersihan yang dipanggil Jotai saat memutuskan apakah anggota keluarga yang kedaluwarsa perlu dikeluarkan.

Untuk daftar yang itemnya ditambahkan dan dihapus, selalu bersihkan entri keluarga atom ketika item dihapus agar tidak terjadi kebocoran memori.

Paket jotai-devtools menyediakan panel visual yang mencantumkan semua atom aktif beserta nilainya saat ini. Instal paket tersebut, bungkus aplikasi Anda dengan DevTools, lalu periksa status atom secara waktu nyata.

Setiap pembaruan atom dicatat bersama nilai sebelumnya dan berikutnya, sehingga penelusuran kesalahan pada interaksi atom yang kompleks menjadi mudah.

Dalam daftar besar, komponen ListContainer dapat menggunakan useSetAtom(selectedIdAtom) untuk memperbarui pilihan tanpa berlangganan ke selectedIdAtom. Hanya komponen ListItem individual yang memanggil useAtomValue(selectedIdAtom) yang dirender ulang saat pilihan berubah.

Pola ini dapat diskalakan dengan baik: menambahkan ribuan item ke daftar tidak memperlambat pembaruan pilihan.

Pilih kait yang sesuai dengan kebutuhan komponen Anda: useAtomValue untuk tampilan murni, useSetAtom untuk tindakan murni, dan useAtom jika Anda memerlukan keduanya. Rancangan API yang terarah ini membuat tanggung jawab komponen terlihat jelas sekilas.

Komponen bidang formulir biasanya menggunakan useAtom; tombol kirim menggunakan useSetAtom; label yang menampilkan jumlah menggunakan useAtomValue.

Apa keunggulan utama menggunakan useSetAtom alih-alih useAtom?

useAtom memberikan nilai dan fungsi penyetel; useAtomValue hanya memberikan nilai (langganan baca); useSetAtom hanya memberikan fungsi penyetel (tidak ada render ulang saat nilai berubah). atomWithStorage menyimpan nilai ke localStorage dengan dukungan RESET, dan atomFamily membuat atom per parameter untuk daftar dinamis.

Memilih kait yang tepat meminimalkan render ulang yang tidak diperlukan dan memperjelas maksud komponen.