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).