Valtio: A simple proxy-state management solution

valtio

Valtio makes proxy-state simple for React and Vanilla JavaScript. It offers a minimal, flexible, and unopinionated API that feels a touch magical. By turning your state object into a self-aware proxy, Valtio enables fine-grained reactivity and automatic render optimization in React.

Key Features

  • Simple and Intuitive: Manage state with plain JavaScript objects. No boilerplate, no complex APIs.
  • Reactive by Default: Mutate your state directly from anywhere, and components will reactively update.
  • Render Optimized: React components only re-render when the specific parts of the state they access have changed.
  • React and Vanilla JS: While it shines in React, Valtio has a dependency-free vanilla core that can be used in any JavaScript project.
  • React Suspense Ready: Integrates seamlessly with React 19's use hook and Suspense for handling async data.
  • Developer Friendly: Comes with Redux DevTools support for easy debugging and time-travel.

At a Glance

Here's a quick look at how Valtio works in a React component.

1. Create a proxy state

Wrap your state object with proxy. Valtio turns it into a self-aware proxy that tracks changes.

import { proxy } from 'valtio';

const state = proxy({ count: 0 });

2. Mutate the state from anywhere

You can mutate the state as you would with any normal JavaScript object. These mutations can happen inside components, in utility functions, or anywhere else.

setInterval(() => {
  ++state.count;
}, 1000);

3. Use the state in React

The useSnapshot hook creates a local, immutable snapshot of the state. Your component will automatically re-render when the parts of the state it uses are modified.

import { useSnapshot } from 'valtio';

// This component will only re-render when `state.count` changes.
function Counter() {
  const snap = useSnapshot(state);

  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  );
}

This core loop—proxy to create, mutate directly to update, and useSnapshot to read—is the foundation of Valtio. Explore the documentation to learn more about advanced features like async operations, computed properties, and utilities for Maps and Sets.