পরমাণু অবস্থা মডেল (Jotai, Recoil) অনেক ছোট, স্বাধীন একক যাকে atoms বলা হয় তা থেকে বৈশ্বিক অবস্থা তৈরি করে, নিচ থেকে উপরে সংযুক্ত করে — একটি বড় শীর্ষ-নিচ store (Redux) বা একটি monolithic context এর পরিবর্তে। কম্পোনেন্টগুলি স্বতন্ত্র 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 স্বয়ংক্রিয়ভাবে আপডেট হয় যখন তারা যা পড়ে তা পরিবর্তিত হয়, একটি স্প্রেডশীটের মতো।
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 এর শীর্ষ-নিচ কাঠামোকে উল্টে দেয়: একটি বড় store কে স্লাইস করার পরিবর্তে, আপনি ছোট atoms কে উপরে সংযুক্ত করেন।
এর অন্তর্নির্মিত granularity সিলেক্টরগুলি ছাড়াই দক্ষ, লক্ষ্যবস্তু পুনরায় রেন্ডার করে — সরাসরি Context এর পারফরম্যান্স সমস্যাগুলিকে সম্বোধন করে।
Atoms (এবং ডেরাইভড atoms) বোঝা আপনার অবস্থা-ব্যবস্থাপনা ডিজাইন স্পেসের জ্ঞানকে পূর্ণ করে, single-store (Redux/Zustand) এবং reactive (MobX/Signals) মডেলের সাথে, আপনাকে এমন প্যারাডাইম বেছে নিতে সাহায্য করে যা একটি অ্যাপের অবস্থা আকৃতির সাথে সবচেয়ে ভালভাবে মানানসই।