valtio

Proxy-based state that makes React state dead simple — mutate a plain object, components re-render.

valtio

React

Proxy-based state that makes React state dead simple — mutate a plain object, components re-render.

npm GitHub Docs

Fit

Bundle (gzip)

2.6 kB

6.1 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Immutable update patterns (setState(prev => ({ ...prev, nested: { ...prev.nested } }))) are noisy and error-prone, and sharing that state across unrelated components usually means context boilerplate or a heavier store.

What It Does

Valtio wraps your state in a JavaScript proxy so you mutate it like a normal object. Components call useSnapshot and re-render only when the exact fields they read change, thanks to fine-grained proxy tracking. The same store works outside React too, so non-UI code can read and write it freely.

Installation

bash

npm install valtio

Usage Example

jsx

import { proxy, useSnapshot } from 'valtio';

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

export function Counter() {
  const snap = useSnapshot(state);
  return <button onClick={() => state.count++}>{snap.count}</button>;
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.