Statio.docs

DX Should Come First

State Management Without Ceremony.

Statio is an extremely lightweight, lightning-fast state management library for React.
Zero unnecessary re-renders. Full TypeScript support. Productive in 5 minutes.

Learn Statio

Why Statio?

Built for developers who value performance, simplicity, and type safety.

Extremely Lightweight

Only 2.1kB gzipped. That's 1/10 the size of Redux. Zero bloat, zero dependencies.

Statio

Redux

Intelligent State Detection

Selective subscriptions eliminate unnecessary re-renders. Components only update when their specific state slice changes.

Component A✓ Updated

Component BSkipped

Component CSkipped

Intuitive API

Simple mental model. No boilerplate, no actions, no reducers. Just state and updates. Productive in under 5 minutes.

const count = useStore(s => s.count)
store.set({ count: count + 1 })

Powerful Middleware

Highly extensible architecture. Add persistence, devtools, logging, or custom middleware. Scales from prototypes to production.

Persist middleware

DevTools integration

Custom interceptors

TypeScript First

Built with TypeScript from the ground up. Full type inference, autocomplete, and compile-time safety out of the box.

type State = { count: number }
// Full type inference ✓

Smart Architecture

Subscription-based updates with automatic dependency tracking. No manual optimization needed.

State → Selector → Component

└─ Auto-tracked deps

Developer Experience

Clean API. Full type safety. Zero configuration.

Installation

npm install statio

Global Store

const store = createStore({
  count: 0,
  user: null
})

store.set({ notifications: newNotifications })
const currentUser = store.get("currentUser")

store.subscribe("cartItems", (items) => {
  console.log(`장바구니에 ${items.length}개 상품이 있습니다`)
})

Use in Components

const [todos, setTodos] = useStatio("todoList", [])
  
  const addTodo = (text: string) => {
    setTodos([...todos, { id: Date.now(), text, done: false }])
  }
  
  return (
    <div>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
      <AddTodo onAdd={addTodo} />
    </div>
  )
}

TypeScript Inference

function TypeInference() {
  const [count, setCount] = useStatio("counter", 0)
  const [user, setUser] = useStatio("user", {
    name: "Bob",
    age: 25,
  })

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {user.name}</p>
    </div>
  )
}

// count is automatically inferred as number type
// user is automatically inferred as { name: string; age: number } type
// Perfect type safety without explicit type definitions

Performance & Architecture

Designed to eliminate unnecessary re-renders through selective subscriptions.

How Statio Avoids Unnecessary Re-renders

Selector-Based Subscriptions

Components subscribe only to the specific state slices they need via selector functions.

const count = useStore(store, s => s.count)  // Only subscribes to count

Automatic Dependency Tracking

Statio tracks which state properties your selector accesses and only triggers updates when those change.

State Update:

{ user: newUser }

✓Components using s.user re-render

○Components using s.count skip render

Shallow Equality Checks

Selector results are compared using shallow equality. If the result hasn't changed, no re-render occurs.

Architecture Diagram

Store

Selector

→ Tracks deps

Component

→ Renders only when needed