DEV Community

Alex Spinov
Alex Spinov

Posted on

Valtio Has a Free API — Here's How to Use Proxy-Based State in React

#webdev #javascript #tutorial #react

Valtio is a proxy-based state management library for React that makes state as simple as mutating a regular JavaScript object. No reducers, no actions, no boilerplate.

What is Valtio?

Valtio wraps your state object in a JavaScript Proxy. When you mutate the proxy, React components that subscribe to it automatically re-render. It's the most intuitive state management approach available.

Quick Start 

npm install valtio
Enter fullscreen mode Exit fullscreen mode 
import { proxy, useSnapshot } from 'valtio';

const state = proxy({
  count: 0,
  todos: [],
});

function Counter() {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={() => state.count++}>Increment</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Notice how you just mutate state.count++ — no dispatch, no setter function, no action creator.

Derived State with derive 

import { derive } from 'valtio/utils';

const derived = derive({
  doubled: (get) => get(state).count * 2,
  todoCount: (get) => get(state).todos.length,
});
Enter fullscreen mode Exit fullscreen mode

Derived values recompute automatically when source state changes.

Subscribing Outside React 

import { subscribe } from 'valtio';

subscribe(state, () => {
  console.log('State changed:', state.count);
  localStorage.setItem('app-state', JSON.stringify(state));
});
Enter fullscreen mode Exit fullscreen mode

Actions Are Just Functions 

// No action creators, no reducers
const actions = {
  addTodo: (text) => {
    state.todos.push({ id: Date.now(), text, done: false });
  },
  toggleTodo: (id) => {
    const todo = state.todos.find(t => t.id === id);
    if (todo) todo.done = !todo.done;
  },
  removeDone: () => {
    state.todos = state.todos.filter(t => !t.done);
  },
};
Enter fullscreen mode Exit fullscreen mode

proxyMap and proxySet 

import { proxyMap, proxySet } from 'valtio/utils';

const users = proxyMap([
  ['alice', { name: 'Alice', role: 'admin' }],
]);

const tags = proxySet(['react', 'valtio']);

users.set('bob', { name: 'Bob', role: 'user' });
tags.add('proxy');
Enter fullscreen mode Exit fullscreen mode

Nested Objects Work Automatically 

const appState = proxy({
  user: {
    profile: {
      name: 'Alice',
      settings: {
        theme: 'dark',
        notifications: true,
      },
    },
  },
});

// Deep mutation just works
appState.user.profile.settings.theme = 'light';
Enter fullscreen mode Exit fullscreen mode

Why Valtio Over Redux/Zustand?

Feature Valtio Redux Toolkit Zustand
Boilerplate Almost none Medium Low
Learning curve Minutes Hours 30 min
Mutation style Direct Immer in reducers Set function
Bundle size ~3KB ~30KB ~1KB
Outside React Yes Yes Yes

Valtio is ideal when you want the simplest possible state management without sacrificing power.

Need to scrape data for your React app? I build custom web scraping solutions. Check out my Apify actors for ready-made scrapers, or email me at spinov001@gmail.com for custom data extraction.

What state management library do you use? Let me know in the comments!

Top comments (0)