valtio-define

name	valtio-define
description	Comprehensive skills for working with valtio-define
metadata	{"author":"Hairyf","version":"2026.04.16","source":"Internal Documentation"}

Based on valtio-define v1.3.0 (updated since v1.2.1). A Valtio-based state management library with a Pinia-like API for React applications.

Overview

valtio-define provides a factory function for creating reactive stores with state, actions, and getters. Built on top of Valtio, it offers a familiar API similar to Pinia with full TypeScript support.

Core References

Topic	Description	Reference
defineStore	Core API for creating reactive stores	core-define-store
useStore	React hook for accessing store state	core-use-store
Types	TypeScript types and interfaces	core-types

Advanced Features

Topic	Description	Reference
Subscriptions	Subscribe to state changes	advanced-subscribe
Patch	Update state with patch operations	advanced-patch
Store to State	Convert store to useState-like hooks	advanced-store-to-state

Features

Topic	Description	Reference
Plugin System	Extend stores with plugins	feature-plugin-system
Persist Plugin	Persist state to storage	feature-plugin-persist
Signal Plugin	JSX inline signals via $signal + custom JSX runtime	feature-plugin-signal

Quick Start

import { defineStore, useStore } from 'valtio-define'

const store = defineStore({
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
  },
  getters: {
    doubled() { return this.count * 2 },
  },
})

function Counter() {
  const state = useStore(store)
  return (
    <div>
      <div>Count: {state.count}</div>
      <div>Doubled: {state.doubled}</div>
      <button onClick={store.increment}>Increment</button>
    </div>
  )
}