![Introducing License Enforcement in Socket](https://cdn.sanity.io/images/cgdhsj6q/production/739c20a7a75752fc62de4685a31b46625de9f00a-2108x1404.png?w=400&fit=max&auto=format)
Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Valtio is a proxy-state library for React that makes it easy to manage and mutate state with a simple and intuitive API. It leverages JavaScript proxies to create reactive state objects that automatically trigger re-renders in your React components when the state changes.
Reactive State Management
Valtio allows you to create reactive state objects using the `proxy` function. The `useSnapshot` hook is used to subscribe to state changes and trigger re-renders in your React components.
const { proxy, useSnapshot } = require('valtio');
const state = proxy({ count: 0 });
function Counter() {
const snap = useSnapshot(state);
return (
<div>
<p>{snap.count}</p>
<button onClick={() => state.count++}>Increment</button>
</div>
);
}
Derived State
Valtio supports derived state using the `derive` function. This allows you to create computed properties that automatically update when the underlying state changes.
const { proxy, useSnapshot, derive } = require('valtio');
const state = proxy({ count: 0 });
derive({
doubleCount: (get) => get(state).count * 2
});
function Counter() {
const snap = useSnapshot(state);
return (
<div>
<p>{snap.count}</p>
<p>{snap.doubleCount}</p>
<button onClick={() => state.count++}>Increment</button>
</div>
);
}
Middleware
Valtio provides a `subscribe` function to listen for state changes and execute side effects. This is useful for logging, analytics, or other middleware-like functionalities.
const { proxy, subscribe } = require('valtio');
const state = proxy({ count: 0 });
subscribe(state, () => {
console.log('State changed:', state.count);
});
state.count++;
Zustand is a small, fast, and scalable bearbones state-management solution for React. It provides a simple API for creating global state and has a minimalistic approach compared to Valtio. While Valtio uses proxies for reactivity, Zustand uses hooks and selectors for state management.
MobX is a battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). It uses observables to track state changes and automatically re-renders components. MobX is more feature-rich and has a steeper learning curve compared to Valtio.
Redux is a predictable state container for JavaScript apps, commonly used with React. It provides a centralized store and actions to manage state changes. Redux is more verbose and requires more boilerplate code compared to Valtio, but it is highly scalable and has a large ecosystem of middleware and developer tools.
npm i valtio
makes proxy-state simple
Valtio turns the object you pass it into a self-aware proxy.
import { proxy, useSnapshot } from 'valtio'
const state = proxy({ count: 0, text: 'hello' })
You can make changes to it in the same way you would to a normal js-object.
setInterval(() => {
++state.count
}, 1000)
Create a local snapshot that catches changes. Rule of thumb: read from snapshots, mutate the source. The component will only re-render when the parts of the state you access have changed, it is render-optimized.
// This will re-render on `state.count` change but not on `state.text` change
function Counter() {
const snap = useSnapshot(state)
return (
<div>
{snap.count}
<button onClick={() => ++state.count}>+1</button>
</div>
)
}
Internally, useSnapshot
calls snapshot
in valtio/vanilla,
and wraps the snapshot object with another proxy to detect property access.
This feature is based on proxy-compare.
Two kinds of proxies are used for different purposes:
proxy()
from valtio/vanilla
is for mutation tracking or write tracking.createProxy()
from proxy-compare
is for usage tracking or read tracking.Valtio tries best to handle this
behavior
but it's hard to understand without familiarity.
const state = proxy({ count: 0, inc() { ++this.count } })
state.inc() // `this` points to `state` and it works fine
const snap = useSnapshot(state)
snap.inc() // `this` points to `snap` and it doesn't work because snapshot is frozen
To avoid this pitfall, the recommended pattern is not to use this
and prefer arrow function.
const state = proxy({ count: 0, inc: () => { ++state.count } })
If you are new to this, it's highly recommended to use eslint-plugin-valtio.
You can access state outside of your components and subscribe to changes.
import { subscribe } from 'valtio'
// Suscribe to all state changes
const unsubscribe = subscribe(state, () => console.log('state has changed to', state))
// Unsubscribe by calling the result
unsubscribe()
You can also subscribe to a portion of state.
const state = proxy({ obj: { foo: 'bar' }, arr: ['hello'] })
subscribe(state.obj, () => console.log('state.obj has changed to', state.obj))
state.obj.foo = 'baz'
subscribe(state.arr, () => console.log('state.arr has changed to', state.arr))
state.arr.push('world')
To subscribe to a primitive value of state, consider subscribeKey
in utils.
import { subscribeKey } from 'valtio/utils'
const state = proxy({ count: 0, text: 'hello' })
subscribeKey(state, 'count', (v) => console.log('state.count has changed to', v))
There is another util watch
which might be convenient in some cases.
import { watch } from 'valtio/utils'
const state = proxy({ count: 0 })
const stop = watch((get) => {
console.log('state has changed to', get(state)) // auto-subscribe on use
})
Valtio supports React-suspense and will throw promises that you access within a components render function. This eliminates all the async back-and-forth, you can access your data directly while the parent is responsible for fallback state and error handling.
const state = proxy({ post: fetch(url).then((res) => res.json()) })
function Post() {
const snap = useSnapshot(state)
return <div>{snap.post.title}</div>
}
function App() {
return (
<Suspense fallback={<span>waiting...</span>}>
<Post />
</Suspense>
)
}
This may be useful if you have large, nested objects with accessors that you don't want to proxy. ref
allows you to keep these objects inside the state model.
See #61 and #178 for more information.
import { proxy, ref } from 'valtio'
const state = proxy({
count: 0,
dom: ref(document.body),
})
You can read state in a component without causing re-render.
function Foo() {
const { count, text } = state
// ...
Or, you can have more control with subscribing in useEffect.
function Foo() {
const total = useRef(0)
useEffect(() => subscribe(state.arr, () => {
total.current = state.arr.reduce((p, c) => p + c)
}), [state.obj])
// ...
By default, state mutations are batched before triggering re-render. Sometimes, we want to disable the batching.
function TextBox() {
const snap = useSnapshot(state, { sync: true })
return <input value={snap.text} onChange={(e) => (state.text = e.target.value)} />
}
You can use Redux DevTools Extension for plain objects and arrays.
import { devtools } from 'valtio/utils'
const state = proxy({ count: 0, text: 'hello' })
const unsub = devtools(state, 'state name')
Valtio is not tied to React, you can use it in vanilla-js.
import { proxy, subscribe, snapshot } from 'valtio/vanilla'
const state = proxy({ count: 0, text: 'hello' })
subscribe(state, () => {
console.log('state is mutated')
const obj = snapshot(state) // A snapshot is an immutable object
})
useProxy
macroWe have a convenient macro with babel-plugin-macros.
import { useProxy } from 'valtio/macro'
const Component = () => {
useProxy(state)
return (
<div>
{state.count}
<button onClick={() => ++state.count}>+1</button>
</div>
)
}
// the code above becomes the code below.
import { useSnapshot } from 'valtio'
const Component = () => {
const snap = useSnapshot(state)
return (
<div>
{snap.count}
<button onClick={() => ++state.count}>+1</button>
</div>
)
}
derive
utilYou can subscribe to some proxies and create a derived proxy.
import { derive } from 'valtio/utils'
// create a base proxy
const state = proxy({
count: 1,
})
// create a derived proxy
const derived = derive({
doubled: (get) => get(state).count * 2,
})
// alternatively, attach derived properties to an existing proxy
derive({
tripled: (get) => get(state).count * 3,
}, {
proxy: state,
})
proxyWithComputed
utilYou can have computed values with dependency tracking with property access.
Dependency tracking in proxyWithComputed
conflicts with the work in useSnapshot
.
React users should prefer using derive
.
proxyWithComputed
works well for some edge cases and for vanilla-js users.
import { proxyWithComputed } from 'valtio/utils'
const state = proxyWithComputed({
count: 1,
}, {
doubled: snap => snap.count * 2
})
// Computed values accept custom setters too:
const state2 = proxyWithComputed({
firstName: 'Alec',
lastName: 'Baldwin'
}, {
fullName: {
get: (snap) => snap.firstName + ' ' + snap.lastName,
set: (state, newValue) => { [state.firstName, state.lastName] = newValue.split(' ') },
}
})
// if you want a computed value to derive from another computed, you must declare the dependency first:
const state = proxyWithComputed({
count: 1,
}, {
doubled: snap => snap.count * 2,
quadrupled: snap => snap.doubled * 2
})
The last use case fails to infer types in TypeScript #192.
proxyWithHistory
utilThis is a utility function to create a proxy with snapshot history.
import { proxyWithHistory } from 'valtio/utils'
const state = proxyWithHistory({ count: 0 })
console.log(state.value) // ---> { count: 0 }
state.value.count += 1
console.log(state.value) // ---> { count: 1 }
state.undo()
console.log(state.value) // ---> { count: 0 }
state.redo()
console.log(state.value) // ---> { count: 1 }
Valtio is unopinionated about best practices. The community is working on recipes on wiki pages.
FAQs
🧙 Valtio makes proxy-state simple for React and Vanilla
The npm package valtio receives a total of 353,343 weekly downloads. As such, valtio popularity was classified as popular.
We found that valtio demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.