What is Astro's Nanostores integration for state management?
Answer
Nanostores is the recommended state management solution for sharing state between Astro islands (framework components from different frameworks). It is a tiny (~265 bytes), framework-agnostic atomic state library. Define a store: import { atom, map } from "nanostores"; export const cartCount = atom(0); export const user = map({ name: "", authenticated: false });. Use in React island: import { useStore } from "@nanostores/react"; const count = useStore(cartCount); <button onClick={() => cartCount.set(count + 1)}>{count}</button>. Use in Svelte island: import { cartCount } from "../stores"; $cartCount (Svelte auto-subscribes). Use in Vue island: const count = useStore(cartCount). Nanostores' atomic model ensures each island subscribes only to the stores it needs — no unnecessary re-renders. It replaces the need for a global React context or Redux in multi-framework Astro projects. For persisting state: persistentAtom syncs to localStorage automatically.
Previous
How do you handle authentication in Remix?
Next
How does Remix's data flow architecture compare to traditional React apps?