ما هو نموذج الحالة الذري (Jotai/Recoil)؟

import { atom, useAtom } from "jotai";

const countAtom = atom(0);              // a primitive atom — one piece of state
const nameAtom = atom("Ann");           // another, independent

// 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()),
);

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)