Atom: Unit State dalam Jotai

Di Jotai, status dipecah menjadi atom: bagian-bagian kecil dan independen dari status reaktif. Setiap atom menyimpan satu nilai dan dibuat di luar komponen dengan atom(initialValue).

Hal ini mencerminkan model mental untuk memecah status menjadi unit-unit terkecil yang bermakna, bukan menjadi satu objek penyimpanan besar.

Ketika nilai suatu atom berubah, hanya komponen yang berlangganan pada atom tertentu tersebut yang dirender ulang. Komponen yang membaca atom lain tidak terpengaruh.

Reaktivitas terperinci ini merupakan keunggulan utama Jotai dibandingkan React Context, yang merender ulang semua konsumen setiap kali terjadi perubahan.

Definisikan atom pada tingkat modul: const countAtom = atom(0). Hal ini memastikan identitas atom tetap stabil di seluruh perenderan dan atom tidak dibuat ulang setiap kali komponen dipasang.

Atom adalah referensi ringan; atom tidak menyimpan nilainya sendiri. Nilai tersebut berada di penyimpanan Jotai.

Secara default, Jotai menggunakan penyimpanan global implisit. Anda tidak perlu membungkus aplikasi dalam Provider untuk mulai menggunakan atom, sehingga penerapannya pada proyek yang sudah ada menjadi sederhana.

Atom dapat diakses secara global dari komponen mana pun di dalam pohon tanpa meneruskan prop atau merangkai konteks.

Jika Anda memerlukan beberapa instans independen dari pohon komponen yang sama (misalnya, dua formulir terpisah, masing-masing dengan atom status formulirnya sendiri), bungkus setiap formulir dalam Provider Jotai. Setiap Provider membuat penyimpanan yang terisolasi.

Hal ini berguna untuk arsitektur mikro-frontend atau tata letak halaman kompleks dengan pulau-pulau status yang independen.

Penyimpanan global mempertahankan atom selama masa hidup aplikasi. Penyimpanan Provider terlingkup direset ketika Provider dilepas, sehingga cocok untuk dialog modal atau status tingkat halaman yang tidak seharusnya dipertahankan secara global.

Anda bahkan dapat meneruskan instans penyimpanan khusus ke Provider untuk isolasi perenderan sisi server.

Zustand menggunakan satu objek penyimpanan dengan pemilih untuk mencegah perenderan ulang yang tidak perlu. Jotai membagi status menjadi atom, dan setiap komponen hanya berlangganan pada atom yang dibacanya.

Jotai lebih alami untuk status antarmuka pengguna yang terperinci (nilai masukan individual, penanda sakelar). Zustand cocok untuk status aplikasi yang lebih besar dan saling terhubung.

React Context merender ulang setiap komponen konsumen setiap kali nilai konteks berubah, meskipun komponen yang mengonsumsinya hanya memerlukan satu bidang dari objek konteks tersebut.

Jotai mengatasi hal ini: komponen yang menggunakan useAtom(nameAtom) hanya dirender ulang ketika nameAtom berubah, bukan ketika atom lain berubah.

Jotai menggunakan perbandingan Object.is secara default untuk menentukan apakah nilai suatu atom telah berubah. Jika Anda menetapkan atom ke nilai yang sama dengan nilai yang sudah dimilikinya, tidak ada perenderan ulang yang dipicu.

Untuk objek kompleks, gunakan utilitas selectAtom untuk mengambil nilai primitif yang stabil dari atom besar, sehingga mencegah perenderan ulang ketika bidang yang tidak terkait berubah.

useState bersifat lokal bagi satu komponen. Atom dibagikan di seluruh pohon komponen tanpa perlu meneruskannya secara eksplisit. Ketika dua komponen saudara membaca atom yang sama, keduanya otomatis tetap selaras.

Hal ini menghilangkan kebutuhan untuk mengangkat status ke tingkat yang lebih tinggi demi berbagi lintas komponen, sekaligus menjaga perenderan ulang tetap minimal.

Atom yang umum digunakan: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Atom-atom ini didefinisikan sekali dan diimpor di mana pun dalam aplikasi.

Setiap atom bersifat independen: memperbarui cartItemsAtom tidak memicu perenderan ulang pada komponen yang hanya membaca themeAtom.

Bagaimana perbedaan Jotai dengan React Context dalam hal render ulang?

Atom adalah unit dasar status dalam Jotai, dibuat dengan atom(initialValue) di luar komponen dan dibagikan ke seluruh pohon tanpa penyedia secara bawaan. Saat sebuah atom berubah, hanya komponen yang berlangganan yang dirender ulang.

Reaktivitas berbutir halus ini merupakan keunggulan utama Jotai dibandingkan React Context, dan model langganan per atomnya berbeda dari pendekatan satu penyimpanan milik Zustand.