Features
- Proxy-based state — mutate directly
- Automatic render optimization with useSnapshot
- Computed properties with derive
- No boilerplate — just plain JavaScript objects
- Works outside React (vanilla JavaScript)
Pros
- Most intuitive API — just mutate objects
- Automatic tracking of which properties are used
- Tiny bundle (~3kb gzipped)
Cons
- Proxy-based approach has edge cases with some data types
- Mutable pattern goes against React's immutable conventions
- Smaller community than Zustand or Redux
Overview
Valtio is a proxy-based state management library for React that makes state as simple as mutating a JavaScript object. Created by the pmndrs collective, Valtio uses JavaScript Proxies to track which properties are accessed during rendering and automatically triggers re-renders only for components that use changed properties.
With Valtio, you create a proxy state object and mutate it directly — state.count++. The useSnapshot hook creates a read-only snapshot of the state for rendering, and only components that access changed properties re-render. This makes state management feel like writing vanilla JavaScript.
When to Use
Valtio is the right choice when you want the simplest possible API for state management, when your team prefers mutable patterns, or when you want state that can be used both inside and outside React components. It’s great for teams that find Redux or even Zustand too ceremonious.
Getting Started
npm install valtioimport { proxy, useSnapshot } from "valtio";
const state = proxy({ count: 0 });
function increment() {
state.count++;
}
function Counter() {
const snap = useSnapshot(state);
return <button onClick={increment}>Count: {snap.count}</button>;
}