useStore

function useStore<TAtom extends AnyAtom | undefined, T>(
  atom: TAtom,
  selector: (
    snapshot: TAtom extends { get: () => infer TSnapshot }
      ? TSnapshot
      : undefined,
  ) => T,
  compare?: (a: T, b: T) => boolean
): T

import { useStore } from '@tanstack/react-store'
import { store } from './store'

function Counter() {
  const count = useStore(store, (state) => state.count)

  return <div>Count: {count}</div>
}

import { useStore, shallow } from '@tanstack/react-store'
import { store } from './store'

function UserProfile() {
  // Only re-render if user object properties change (shallow comparison)
  const user = useStore(
    store,
    (state) => ({ name: state.name, email: state.email }),
    shallow
  )

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </div>
  )
}

import { useStore } from '@tanstack/react-store'
import { store } from './store'

function Dashboard() {
  const stats = useStore(store, (state) => ({
    total: state.items.length,
    completed: state.items.filter(i => i.done).length
  }))

  return (
    <div>
      <p>Total: {stats.total}</p>
      <p>Completed: {stats.completed}</p>
    </div>
  )
}