useAtom ile Atomları Okuma ve Yazma

useAtom(someAtom), useState API'sini yansıtarak [value, setter] döndürür. value, atomun geçerli durumudur; setter ise onu günceller. Bir bileşen atomu hem okuyor hem de yazıyorsa bunu kullanın.

setter, yeni bir değeri veya güncelleyici bir işlevi kabul eder: setCount(c => c + 1).

useAtomValue(someAtom), setter olmadan yalnızca geçerli değeri döndürür. Bunu, durumu okuyup hiçbir zaman değiştirmeyen yalnızca görüntüleme yapan bileşenlerde kullanın.

Bileşen bir setter başvurusu tutmadığından, amaç kodda açıkça belgelenir: Bu bileşen yalnızca okuma yapar.

useSetAtom(someAtom), yalnızca setter işlevini döndürür. En önemlisi, bileşeni atomun değerine abone etmez. Atom değiştiğinde bileşen hiçbir zaman yeniden oluşturulmaz.

Bunu, durum değişikliklerini gönderen ancak türetilmiş bir kullanıcı arayüzü göstermeyen düğmeler gibi yalnızca eylem gerçekleştiren bileşenlerde kullanın.

Bir sayacı artırmak için useSetAtom(countAtom) çağıran bileşen, değer aboneliği olmadığı için countAtom değiştiğinde hiçbir zaman yeniden oluşturulmaz. Yalnızca sayacı görüntüleyen bileşen yeniden oluşturulur.

Bu, basit ama güçlü bir iyileştirmedir: Zincirleme yeniden oluşturmaları önlemek için yazanları okuyanlardan ayırın.

atomWithStorage'ı jotai/utils içinden içe aktarın. Bunu atom() ile tamamen aynı şekilde kullanın; ancak ilk bağımsız değişken olarak bir depolama anahtarı verin: atomWithStorage('theme', 'light'). Atom, localStorage ile otomatik olarak eşitlenir.

Sayfa yeniden yüklendiğinde atom, localStorage içinden başlatılır. Atomu okuyan tüm bileşenler kalıcı olarak saklanan değeri hemen alır.

jotai/utils içindeki RESET simgesi, bir atomWithStorage atomunun setter işlevine aktarılabilir: setter(RESET). Bu işlem localStorage girdisini temizler ve atomu başlangıç değerine sıfırlar.

Bu özellik, oturum kapatma akışları veya ayarlar sayfalarındaki "varsayılanlara sıfırla" düğmeleri için kullanışlıdır.

jotai/utils içindeki atomFamily, parametreli bir atom döndüren bir fabrika oluşturur. Örneğin atomFamily(id => atom(null)), aktarılan her benzersiz id için ayrı bir atom oluşturur.

Bu yaklaşım, tek bir büyük eşleme atomunu yönetmeden selectedAtom(itemId) veya expandedAtom(rowId) gibi öğe başına durumlar için idealdir.

Kimlikler biriktikçe atom aileleri sınırsız biçimde büyüyebilir. Jotai'nin kullanım süresi dolmuş aile üyelerini kaldırıp kaldırmayacağına karar verirken çağıracağı bir temizleme koşulu tanımlamak için atomFamily.setShouldRemove((createdAt, param) => ...) kullanın.

Öğelerin eklendiği ve kaldırıldığı listelerde, bellek sızıntılarını önlemek için öğeler silindiğinde atom ailesi girdilerini her zaman temizleyin.

jotai-devtools paketi, tüm etkin atomları ve geçerli değerlerini listeleyen görsel bir panel sağlar. Paketi yükleyin, uygulamanızı DevTools ile sarın ve atom durumunu gerçek zamanlı olarak inceleyin.

Her atom güncellemesi, önceki ve sonraki değerle birlikte günlüğe kaydedilir; bu da karmaşık atom etkileşimlerinde hata ayıklamayı kolaylaştırır.

Büyük bir listede ListContainer bileşeni, selectedIdAtom'a abone olmadan seçimi güncellemek için useSetAtom(selectedIdAtom) kullanabilir. Seçim değiştiğinde yalnızca useAtomValue(selectedIdAtom) çağıran ayrı ListItem bileşenleri yeniden oluşturulur.

Bu örüntü iyi ölçeklenir: binlerce liste öğesi eklemek, seçim güncellemelerini yavaşlatmaz.

Bileşeninizin gereksinimine uygun kancayı seçin: salt görüntüleme için useAtomValue, salt eylemler için useSetAtom, her ikisine de ihtiyaç duyduğunuzda useAtom. Bu bilinçli API tasarımı, bileşenin sorumluluğunu ilk bakışta anlaşılır kılar.

Bir form alanı bileşeni genellikle useAtom kullanır; gönder düğmesi useSetAtom kullanır; bir sayacı görüntüleyen etiket ise useAtomValue kullanır.

useAtom yerine useSetAtom kullanmanın temel avantajı nedir?

useAtom hem değeri hem de setter'ı verir; useAtomValue yalnızca değeri verir (okuma abonelikleri); useSetAtom yalnızca setter'ı verir (değer değiştiğinde yeniden oluşturma olmaz). atomWithStorage, RESET desteğiyle localStorage'a kalıcı olarak kaydeder ve atomFamily, dinamik listeler için parametre başına atomlar oluşturur.

Doğru kancayı seçmek gereksiz yeniden oluşturmaları en aza indirir ve bileşenin amacını açıkça belirtir.