Atomic State: Recoil और Jotai
In this page:
// Recoil
const nameAtom = atom({ key: "uniqueKey", default: initial });
const [value, setValue] = useRecoilState(nameAtom);
// Jotai
const nameAtom = atom(initial);
const [value, setValue] = useAtom(nameAtom);'Atomic' State का मतलब क्या है
एक बड़े state object के बजाय (जैसे Redux में या एक single Context में), atomic libraries state को कई छोटे, independent pieces में split करती हैं जिन्हें atoms कहा जाता है।
हर atom खुद का एक unit of state है जिसे components individually पढ़ और update कर सकते हैं, unrelated data को touch किए बिना।
उदाहरण: What 'Atomic' State Means
// Run in your local React project (npm install required)
// Recoil
import { atom, useRecoilState } from 'recoil';
const countAtom = atom({ key: 'count', default: 0 });
function Counter() {
const [count, setCount] = useRecoilState(countAtom);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Recoil की RecoilRoot Requirement
Recoil को app को एक single <RecoilRoot> component में wrap करना चाहिए, Redux के Provider या React Router के BrowserRouter जैसा, ताकि इसका internal atom-tracking system काम कर सके। इसके बिना, useRecoilState और related hooks काम नहीं करेंगे।
उदाहरण: Recoil's RecoilRoot Requirement
// Run in your local React project (npm install required)
import { RecoilRoot } from 'recoil';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<RecoilRoot>
<App />
</RecoilRoot>
);⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Jotai: बिना Provider के Atomic State
Jotai Recoil जैसी एक similar atomic philosophy follow करता है लेकिन बिल्कुल बिना किसी wrapping Provider के काम करने के लिए designed है — atom() से defined atoms useAtom hook के साथ tree में कहीं भी directly उपयोग किए जा सकते हैं, setup को और भी lighter बनाते हुए।
उदाहरण: Jotai: Atomic State Without a Provider
// Run in your local React project (npm install required)
// Jotai — no Provider required
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Module scope के बजाय एक component के render के अंदर एक नई atom definition बनाना, जो इसे बार-बार reset करती है।
- यह भूल जाना कि Recoil को app को <RecoilRoot> में wrap करना चाहिए, Redux के Provider जैसा।
- Atoms को जैसे वे सिर्फ primitive values रख सकते हों treat करना — वे objects और arrays बिल्कुल ठीक से रख सकते हैं।
- Atomic state management state को एक बड़े store के बजाय छोटे, independent units में split करता है जिन्हें atoms कहा जाता है।
- Recoil को एक <RecoilRoot> wrapper चाहिए; Jotai को किसी wrapper की ज़रूरत नहीं है।
- Components individual atoms में subscribe करते हैं, इसलिए एक atom बदलने से सिर्फ वे components re-render होते हैं जो उस specific atom को उपयोग करते हैं।
- दोनों libraries plain useState के करीब feel करने के लिए designed हैं, Redux के action/reducer model के बजाय।
npm install recoil या npm install jotai चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: