Nano Stores

A tiny state manager for React, React Native, Preact, Vue, Svelte, Solid, Lit, Angular, and vanilla JS. It uses many atomic stores and direct manipulation.

• Small. Between 334 and 1064 bytes (minified and gzipped). Zero dependencies. It uses Size Limit to control size.
• Fast. With small atomic and derived stores, you do not need to call the selector function for all components on every store change.
• Tree Shakable. The chunk contains only stores used by components in the chunk.
• Was designed to move logic from components to stores.
• It has 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, allUsers =>
  allUsers.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>
  )
}

Docs

Read full docs here.