Skip to content

Valtio

A small state library for React and plain JavaScript where you change state like a normal object.

Stars
10.2k
Forks
295
Licence
MIT
Language
TypeScript
Last update
7 days ago
Type
Library

What it is

Valtio lets you wrap a JavaScript object in a proxy, then change its properties directly from anywhere in your code. React components that read the state re-render only when the specific parts they use have changed. It works with React and also with plain JavaScript through a vanilla entry point.

  • Keep a shared counter or form state in one proxy and update it from event handlers or timers
  • Subscribe to changes on a part of the state and run side effects outside React components
  • Store large objects that should not be tracked using ref
  • Sync a text input with state using the sync option for immediate updates
  • Inspect and manipulate plain-object state with Redux DevTools via the devtools util

Great for

  • React developers who want simple shared state without a lot of boilerplate
  • Developers who prefer mutating state directly instead of writing reducers or immutable updates
  • Projects that need state outside components, subscribed to by plain JavaScript code
  • Teams using React 19 who want to read async data with the use hook inside Suspense

Not ideal for

  • Developers who want strictly immutable, reducer-based state, since Valtio uses mutation and snapshots instead
  • Beginners who are not yet comfortable with proxies, as the README notes the snapshot and proxy split can be confusing at first
  • Apps that need Suspense with useTransition to work smoothly, because the README says that pattern suffers from de-opt issues
Step-by-step guide: how to use ValtioInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js

    Install the package

    npm install valtio
  2. 2

    Run it

    • Install valtio with npm install valtio
    • Create a state object with proxy({ count: 0, text: 'hello' })
    • Read it in a component with useSnapshot(state) and change it with ++state.count
    • Optionally subscribe to changes with subscribe(state, callback) outside React
  3. 3

    Get the most out of it

    • Read from snapshots during render and mutate the source proxy in event handlers, as the README recommends
    • Use subscribeKey or watch from valtio/utils to react to specific values
    • Add the eslint-plugin-valtio linter, which the README recommends for newcomers
    • Use the sync option on useSnapshot for text inputs where batching causes lag
    • Use ref for large objects you do not want tracked

Downloads

Strengths

  • Mutations look like normal JavaScript, so there is little new syntax to learn
  • Components re-render only for the state they actually read, according to the README
  • Works in React and in vanilla JavaScript from the same core idea

Trade-offs

  • Its TypeScript types for useSnapshot can be stricter than some users want, and the README points to a workaround
  • The README notes that this in methods can behave unexpectedly, so arrow functions are recommended
  • Suspense with use still has a de-opt issue that affects useTransition, with a third-party library suggested as a workaround

How it compares

ProjectStarsTypeLevelUpdatedBest for
valtio (this)10.2kLibraryintermediate7 days agoReact developers who want simple shared state without a lot of boilerplate
zustand58.9kLibrarybeginner15 days agoReact developers who want simpler shared state than Redux
jotai21.3kLibrarybeginner14 days agoReact developers who want simple shared state without heavy setup
redux-toolkit11.2kLibraryintermediate4 days agoDevelopers already using or learning Redux for app state
mobx28.2kLibraryintermediate5 days agoFrontend developers building React apps with complex or frequently changing state
xstate30.4kLibraryintermediate4 days agoFrontend developers managing complex UI flows with many interacting states

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.