Valtio Proxy State

Manage React state with Valtio's mutable proxy model. Creates proxy stores you mutate directly, subscribes components with useSnapshot, derives computed values, and persists or syncs state without reducers or actions.

This skill helps you build state with Valtio's proxy approach. It defines proxy objects you update by direct mutation, reads render-optimized snapshots with useSnapshot, composes derived state with proxyWithComputed, subscribes to changes outside React, and persists or time-travels state — giving mutable ergonomics with immutable-style re-render tracking.

When to use

Use when you want the simplest possible React state — mutate an object directly and have components update — for canvas/editor tools, form drafts, or shared UI state without action/reducer ceremony.

Examples

Proxy store with mutations

Direct-mutation state for an editor

Create a Valtio proxy store for a drawing app with shapes and selection, mutating state directly and reading it in components with useSnapshot

Derived + persisted state

Computed totals with persistence

Build a Valtio cart store with a derived total and subscribe to persist the cart to localStorage on every change