State Management: Escaping Props Drilling Hell

7. Atomic State: Recoil & Jotai

If you need high performance for complex apps (like a Graphics Editor), Atomic State is the answer.

• Redux/Zustand: One big tree. Good for general apps.
• Recoil/Jotai: Thousands of tiny independent atoms.

// Jotai Example
const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Why use it? It eliminates re-renders by design. Only components subscribed to a specific atom update. Perfect for apps with thousands of interactive elements (like Figma or Excel).