Recoil

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// Atom
const counterState = atom({
  key: 'counter',
  default: 0,
});

// Selector (derived state)
const doubledCounterState = selector({
  key: 'doubledCounter',
  get: ({ get }) => get(counterState) * 2,
});

// Async selector
const todosState = selector({
  key: 'todos',
  get: async () => {
    const response = await fetch('/api/todos');
    return response.json();
  },
});

// Counter component
function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  const doubled = useRecoilValue(doubledCounterState);

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

// App.tsx
import { RecoilRoot } from 'recoil';

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