Jotai

import { atom, useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

// Basic atom
const countAtom = atom(0);

// Derived atom (read-only)
const doubledAtom = atom((get) => get(countAtom) * 2);

// Async atom
const userAtom = atom(async (get) => {
  const userId = get(currentUserIdAtom);
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
});

// Atom with localStorage persistence
const themeAtom = atomWithStorage('theme', 'light');

// Counter component
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);

  return (
    <div>
      <p>العدد: {count}</p>
      <p>المضاعف: {doubled}</p>
      <button onClick={() => setCount(c => c + 1)}>زيادة</button>
    </div>
  );
}

// App.tsx
import { Provider } from 'jotai';

function App() {
  return (
    <Provider>
      <Counter />
    </Provider>
  );
}