atomic state model (Jotai, Recoil) بہت سے چھوٹے، آزاد units سے global state بناتا ہے جنہیں atoms کہا جاتا ہے، جو نیچے سے اوپر کی طرف تشکیل پاتے ہیں — بجائے ایک بڑے top-down store (Redux) یا monolithic context کے۔ Components انفرادی atoms کو subscribe کرتے ہیں اور صرف اس وقت re-render ہوتے ہیں جب وہ تبدیل ہوں۔
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
ہر atom state کا ایک خود مختار ٹکڑا ہے۔ آپ جتنے چاہیں اتنے بناتے ہیں، ہر ایک اپنی جانب سے 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 خودکار طور پر update ہوتے ہیں جب atoms جو وہ پڑھتے ہیں تبدیل ہوں، بالکل spreadsheet کی طرح۔
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 کے لیے جو Redux کی top-down ساخت کو الٹ دیتا ہے: بڑے store کو slice کرنے کی بجائے، آپ چھوٹے atoms کو اوپر کی طرف compose کرتے ہیں۔
اس کی built-in granularity selectors کے بغیر موثر، مقصود re-renders دیتی ہے — براہ راست Context کے performance مسائل کو حل کرتے ہوئے۔
Atoms (اور derived atoms) کو سمجھنا آپ کے state-management design space کے علم کو مکمل کرتا ہے، single-store (Redux/Zustand) اور reactive (MobX/Signals) models کے ساتھ، آپ کو اس paradigm کو منتخب کرنے میں مدد دیتے ہوئے جو ایک app کی state shape کے لیے بہترین ہے۔