Atomik durum modeli (Jotai, Recoil), atomlar adı verilen birçok küçük, bağımsız birimden aşağıdan yukarıya doğru oluşturulan küresel durumu inşa eder — büyük bir yukarıdan aşağıya mağaza (Redux) veya monolitik bir bağlam yerine. Bileşenler bireysel atomlara abone olur ve bunlar değiştiğinde yalnızca yeniden işlenir.
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
Her atom, durumun bağımsız bir parçasıdır. İhtiyacınız kadar çok atom oluşturursunuz, her biri kendi şekilde adreslenebilir.
// a derived atom computes from other atoms; recomputes when its dependencies change
const doubleAtom = atom((get) => get(countAtom) * 2);
const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`);
// writable derived atom
const upperNameAtom = atom(
(get) => get(nameAtom).toUpperCase(),
(get, set, newVal) => set(nameAtom, newVal.toLowerCase()),
);
Atomlar bir bağımlılık grafiğinde birleşir — türetilmiş atomlar, okudukları atomlar değiştiğinde otomatik olarak güncellenir, tıpkı bir elektronik tablo gibi.
function Counter() {
const [count, setCount] = useAtom(countAtom); // global, but useState-like API
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
function Display() {
const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes
}
Redux (top-down): one big state tree; you carve slices/selectors OUT of it
Atomic (bottom-up): start with tiny atoms; compose them UP into derived state
Granularity: each atom is independently subscribable → naturally fine-grained
re-renders (a component using countAtom ignores nameAtom changes)
✓ Fine-grained re-renders by default (subscribe to exactly the atoms you use)
✓ No selector boilerplate; derived state is just another atom
✓ Solves Context's "re-render everything" problem
✓ Great for state that's naturally decomposed into many independent pieces
✗ Many atoms can be harder to organize/trace than one centralized store
✗ Less rigid structure than Redux (a pro or con depending on the team)
Atomik model, Redux'in yukarıdan aşağıya yapısını ters çeviren, küresel durum için ayrı ve giderek daha popüler hale gelen bir yaklaşımdır: büyük bir mağazayı dilimlemek yerine, küçük atomları yukarıya doğru oluşturursunuz.
Dahili ayrıntılı yapısı, seçiciler olmadan verimli, hedefli yeniden işlemeler sağlar — Context'in performans sorunlarını doğrudan ele alır.
Atomları (ve türetilmiş atomları) anlamak, durum yönetimi tasarım alanı hakkındaki bilginizi, tek depolama (Redux/Zustand) ve reaktif (MobX/Signals) modellerle birlikte tamamlar; bir uygulamanın durum şekline en iyi uygun paradigmayı seçmenize yardımcı olur.