atomic state model (Jotai, Recoil) हे global state निर्माण करते अनेक लहान, स्वतंत्र units पासून ज्यांना atoms म्हणतात, bottom-up तरीकाने तयार केलेले — एक मोठ्या top-down store (Redux) किंवा monolithic context च्या जागी. Components व्यक्तीगत atoms साठी subscribe करतात आणि फक्त तेव्हाच re-render होतात जेव्हा ते बदलतात.
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
प्रत्येक atom state चा self-contained piece आहे. तुम्ही जितके आवश्यक असेल तितके तयार करता, प्रत्येक स्वतंत्रपणे addressable.
// 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 एक dependency graph मध्ये compose होतात — derived atoms स्वयंचलितपणे अपडेट होतात जेव्हा ते atoms बदलतात ज्या ते read करतात, स्प्रेडशीटसारखे.
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)
Atomic model हा एक वेगळा, वाढत्या लोकप्रिय global state साठी approach आहे जो Redux च्या top-down structure ला उलट करतो: मोठ्या store ला slice करण्याऐवजी, तुम्ही लहान atoms साठी upward compose करता.
याचे built-in granularity selectors शिवाय efficient, targeted re-renders देते — Context च्या performance issues ला थेट संबोधित करते.
Atoms (आणि derived atoms) समजून घेणे तुमच्या state-management design space च्या ज्ञानला पूर्ण करते, single-store (Redux/Zustand) आणि reactive (MobX/Signals) models च्या बरोबर, तुम्हाला app च्या state shape साठी सर्वोत्तम fit paradigm निवडण्यात मदत करते.