atomic state model (Jotai/Recoil) क्या हो?

Question

Accepted Answer

**atomic state model** (Jotai, Recoil) ले धेरै साना, स्वतन्त्र एकाइहरू जसलाई **atoms** भनिन्छ, मध्ये ग्लोबल state बनाउँछ, bottom-up सँग तयार गरिन्छ — एक ठूलो top-down store (Redux) वा monolithic context को सट्टा। Components व्यक्तिगत atoms मा सदस्यता लिन्छन् र केवल जब *ती* परिवर्तन हुन्छ तब पुनः-render गर्छन्। ## State को सबैभन्दा सानो एकाइ — Atoms ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a primitive atom — one piece of state const nameAtom = atom("Ann"); // another, independent ``` प्रत्येक atom एक आत्मनिर्भर state को टुक्रा हो। तपाइँ आवश्यकतानुसार धेरै बनाउँन सक्नुहुन्छ, प्रत्येक आफ्नै आफै सम्बोधनयोग्य। ## Derived atoms — composition ```jsx // 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 मा composition गर्छन् — derived atoms स्वचलित रूप मा अपडेट हुन्छन् जब तिनीहरूले पढेको atoms परिवर्तन हुन्छ, एक spreadsheet जस्तै। ## Atoms प्रयोग गर्दै — useState जस्तै महसुस गर्छ, तर ग्लोबल ```jsx function Counter() { const [count, setCount] = useAtom(countAtom); // global, but useState-like API return ; } function Display() { const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes } ``` ## Atomic (bottom-up) vs store (top-down) ```text 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) ``` ## लाभ र trade-offs ```text ✓ 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 Redux को top-down संरचना को विपरित गरेर, एक विशिष्ट र बढ्दो लोकप्रिय ग्लोबल state को दृष्टिकोण हो: एक ठूलो store स्लाइस गर्नुको सट्टा, तपाइँ साना atoms लाई upward compose गर्नुहुन्छ। यसको built-in granularity ले efficency, targeted re-renders दिन्छ selectors बिना — directly Context को performance समस्याहरु सम्बोधन गर्दै। Atoms (र derived atoms) को समझ आपको state-management design space को ज्ञान को पूरक गर्छ, single-store (Redux/Zustand) र reactive (MobX/Signals) models को साथ, आपलाई paradigm चयन गर्न मद्दत गर्दै जो app को state shape लाई सबैभन्दा राम्रो फिट गर्छ।