Valtio Has a Free Proxy-Based State API That Simplifies React

Valtio turns plain JavaScript objects into reactive state with zero boilerplate. Just mutate your object — React components re-render automatically.

Basic Usage

npm install valtio

import { proxy, useSnapshot } from 'valtio';

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

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

That is it. No reducers, no actions, no selectors, no context providers.

Advanced Patterns

Derived State with derive

import { derive } from 'valtio/utils';

const state = proxy({ todos: [], filter: 'all' });

const derived = derive({
  filtered: (get) => {
    const { todos, filter } = get(state);
    if (filter === 'done') return todos.filter(t => t.done);
    if (filter === 'pending') return todos.filter(t => !t.done);
    return todos;
  },
  count: (get) => get(state).todos.length
});

Subscriptions Outside React

import { subscribe } from 'valtio';

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

DevTools Integration

import { devtools } from 'valtio/utils';
devtools(state, { name: 'app-state' });

Nested Object Tracking

const state = proxy({
  user: { name: 'Alice', settings: { theme: 'dark' } }
});

// Deep mutations just work
state.user.settings.theme = 'light'; // triggers re-render

Why This Matters

• Zero boilerplate compared to Redux/Zustand
• Mutable API that feels natural to JavaScript developers
• Automatic render optimization — only re-renders what changed
• Works outside React — subscribe from anywhere
• Tiny bundle — ~3KB gzipped

---

Need custom React tooling or frontend architecture consulting? I build developer tools and data pipelines. Check out my web scraping actors on Apify or reach out at [e-mail] for custom solutions.