परमाणु स्थिति मॉडल (Jotai, Recoil) atoms नामक कई छोटी, स्वतंत्र इकाइयों से वैश्विक स्थिति बनाता है, जो नीचे से ऊपर की ओर बनाई गई हैं — एक बड़े ऊपर-नीचे स्टोर (Redux) या एकशास्त्र संदर्भ के बजाय। घटक व्यक्तिगत atoms की सदस्यता लेते हैं और केवल तभी फिर से प्रस्तुत करते हैं जब वे बदल जाएं।
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
प्रत्येक atom स्थिति का एक स्वावलंबी टुकड़ा है। आप जितने की जरूरत है उतने बनाते हैं, प्रत्येक अपने आप पर संबोधित करने योग्य।
// 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()),
);
Atoms निर्भरता ग्राफ में रचना करते हैं — व्युत्पन्न atoms स्वचालित रूप से अपडेट होते हैं जब वे जो atoms पढ़ते हैं वे बदलते हैं, एक स्प्रेडशीट की तरह।
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)
परमाणु मॉडल वैश्विक स्थिति का एक अलग, तेजी से लोकप्रिय दृष्टिकोण है जो Redux की ऊपर-नीचे संरचना को उलट देता है: एक बड़े स्टोर को स्लाइस करने के बजाय, आप छोटे atoms को ऊपर की ओर रचते हैं।
इसकी निर्मित granularity सिलेक्टर्स के बिना कुशल, लक्षित पुनः-प्रस्तुतियां देती है — Context के प्रदर्शन समस्याओं को सीधे संबोधित करते हुए।
Atoms (और व्युत्पन्न atoms) को समझना आपके राज्य-प्रबंधन डिजाइन स्थान के ज्ञान को पूरा करता है, एकल-स्टोर (Redux/Zustand) और प्रतिक्रियाशील (MobX/Signals) मॉडल्स के साथ, आपको उस प्रतिमान को चुनने में मदद करता है जो ऐप की स्थिति आकार के लिए सबसे अच्छा है।