pmndrs/valtio

★ 10,184TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Valtio))
    What it does
      Proxy-based state
      Auto re-renders
    Core API
      proxy function
      useSnapshot hook
      subscribe function
    Features
      Fine-grained updates
      DevTools integration
      Works without React
    Use Cases
      Replace Redux
      Shared app state
    Setup
      npm install
      One line to start

mindmap root((Valtio)) What it does Proxy-based state Auto re-renders Core API proxy function useSnapshot hook subscribe function Features Fine-grained updates DevTools integration Works without React Use Cases Replace Redux Shared app state Setup npm install One line to start

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Replace a Redux store with a Valtio proxy object to share state across React components without writing actions or reducers.

USE CASE 2

Subscribe to specific nested properties so only the components that read changed data re-render.

USE CASE 3

Manage state outside of React components and sync it with the UI using Valtio's subscribe function.

USE CASE 4

Debug state changes over time using Valtio's integration with the Redux DevTools browser extension.

Tech stack

TypeScriptJavaScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

No license information is mentioned in the explanation.

In plain English

Valtio is a small JavaScript library for managing shared data (called state) in React applications. Its main idea is that you can define your app's data as a plain object, and the library will automatically track changes to it so that React components re-render when the parts of the data they care about change. The way it works is straightforward: you wrap your data object with a function called proxy, and from that point on you can update the data by just writing to it like a normal object. There is no special update function to call or action to dispatch. If you increment a counter or change a text value directly, Valtio notices and tells React to update the affected parts of the page. Components opt in by calling useSnapshot, which gives them a read-only view of the current data. Only the properties a component actually reads are tracked, so a change to one property will not re-render a component that never looks at it. You can also subscribe to changes from outside React components, which makes Valtio useful for coordinating state between different parts of an application. There is a subscribe function that calls a callback whenever the state changes, and you can subscribe to the whole state or just a specific nested part of it. Valtio works with plain JavaScript too, not just React. The core proxy, subscribe, and snapshot functions are available without any React dependency. For debugging, it integrates with the Redux DevTools browser extension, which lets you inspect state changes over time. The library is installable via npm in one line and is designed to stay small and simple.

Copy-paste prompts

Prompt 1

I have a React app with a global user object and a shopping cart. Show me how to set up Valtio with proxy and useSnapshot so components only re-render when the data they read changes.

Prompt 2

I'm migrating from Redux to Valtio. Help me convert a Redux slice with 3 actions into a Valtio proxy state object that I update with direct mutations.

Prompt 3

Using Valtio's subscribe function, write code that logs a message every time a specific nested property of my state object changes, without using any React hooks.

Prompt 4

Help me wire up Valtio's Redux DevTools integration so I can inspect state change history in the Chrome browser while developing my React app.

Open on GitHub → Explain another repo

← pmndrs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.