Skip to main content
This example demonstrates the fundamental concepts of Stan.js with a simple counter application. You’ll learn how to create a store, use auto-generated actions, and connect your components to state.

​
Live Demo

Try it on StackBlitz

Open the interactive demo in StackBlitz

​
Store Setup

Create a store with a counter state. Stan.js automatically generates setter functions for all state properties.
store.ts
import { createStore } from 'stan-js'

export const { useStore, reset, getState, actions } = createStore({
    counter: 0,
})
The createStore function returns:
  • useStore - React hook to access state and actions
  • reset - Function to reset specific state keys to their initial values
  • getState - Function to get current state outside of React
  • actions - Object containing all auto-generated setter functions

​
Component Implementation

Let’s break down the counter into separate display and control components to demonstrate Stan.js’s efficient subscription model.
App.tsx
import { useStore, reset, getState } from './store'

const CounterDisplay = () => {
const { counter } = useStore()

return <h2>{counter}</h2>
}

const CounterControls = () => {
const { setCounter } = useStore()

return (
    <div>
        <button onClick={() => setCounter(prev => prev - 1)}>
            Decrement
        </button>
        <button onClick={() => setCounter(prev => prev + 1)}>
            Increment
        </button>
        <button onClick={() => reset('counter')}>
            Reset
        </button>
    </div>
)
}

export const App = () => (
<div>
    <CounterDisplay />
    <CounterControls />
</div>
)

​
Key Concepts

​
Auto-Generated Actions

Stan.js automatically creates setter functions for every property in your store: 
const { setCounter } = useStore()

// Set absolute value
setCounter(10)

// Update based on previous value
setCounter(prev => prev + 1)

​
Reset Functionality

Reset any state property back to its initial value: 
import { reset } from './store'

// Reset single property
reset('counter')

// Reset multiple properties
reset('counter', 'message')

// Reset entire store
reset()

​
Accessing State Outside React

Use getState() to read current state values outside of React components: 
import { getState } from './store'

const currentCounter = getState().counter
console.log('Current counter:', currentCounter)
getState() returns a snapshot of the current state. It doesn’t subscribe to changes. Use it for one-time reads, not for rendering.

​
Performance Benefits

Components only re-render when the specific state properties they access change. In our example:
  • CounterDisplay re-renders only when counter changes
  • CounterControls never re-renders (setters don’t change)
Unlike Context API or other state management solutions, Stan.js doesn’t require wrapping your app in a Provider. Just import and use.
Full TypeScript support with automatic type inference. Your IDE will autocomplete state properties and setter functions.

​
Next Steps

Todo List

Learn about arrays, persistence, and complex state

Async Data

Handle async operations and loading states

API Reference

Explore all createStore options

Computed Values

Create derived state with getters

Build docs developers (and LLMs) love

Get started for freeTalk to us