અણુ સ્થિતિ મોડેલ (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) મોડેલ્સ સાથે, તમને તે પેરાડાઈમ પસંદ કરવામાં મદદ કરે છે જે ઍપ્લીકેશનની સ્થિતિ આકારને સૌથી સારી રીતે ફિટ કરે છે.