- Small: Nano Stores is between 266 and 969 bytes (minified and gzipped). It has zero dependencies and uses Size Limit to control its size.
- Fast: With small atomic and derived stores, you don’t need to call the selector function for all components on every store change.
- Tree Shakable: A chunk only contains stores used by components in the chunk.
- Designed to move logic from components to stores.
- Good TypeScript support.
// store/users.ts
import { atom } from 'nanostores'
export const users = atom<User[]>([])
export function addUser(user: User) {
users.set([...users.get(), user]);
}// store/admins.ts
import { computed } from 'nanostores'
import { users } from './users.js'
export const admins = computed(users, list =>
list.filter(user => user.isAdmin)
)// components/admins.tsx
import { useStore } from '@nanostores/react'
import { admins } from '../stores/admins.js'
export const Admins = () => {
const list = useStore(admins)
return (
<ul>
{list.map(user => <UserItem user={user} />)}
</ul>
)
}
