Wrap your state object

import{proxy,useSnapshot}from'valtio'conststate=proxy({count:0,text:'hello'})

Mutate from anywhere

setInterval(()=>{++state.count},1000)

React via useSnapshot

// This will re-render on `state.count` change but not on `state.text` changefunctionCounter(){constsnap=useSnapshot(state)return(<div>{snap.count}<buttononClick={()=>++state.count}>+1</button></div>)}

Subscribe from anywhere

import{subscribe}from'valtio'// Subscribe to all state changesconstunsubscribe=subscribe(state,()=>console.log('state has changed to',state),)// Unsubscribe by calling the resultunsubscribe()

conststate=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')

import{subscribeKey}from'valtio/utils'conststate=proxy({count:0,text:'hello'})subscribeKey(state,'count',(v)=>console.log('state.count has changed to',v),)

import{watch}from'valtio/utils'conststate=proxy({count:0})conststop=watch((get)=>{console.log('state has changed to',get(state))// auto-subscribe on use})

Suspend your components

conststate=proxy({post:fetch(url).then((res)=>res.json())})functionPost(){constsnap=useSnapshot(state)return<div>{snap.post.title}</div>}functionApp(){return(<Suspensefallback={<span>waiting...</span>}><Post/></Suspense>)}

Holding objects in state without tracking them

import{proxy,ref}from'valtio'conststate=proxy({count:0,dom:ref(document.body),})

Update transiently (for often occurring state-changes)

functionFoo(){const{ count, text}=state// ...

functionFoo(){consttotal=useRef(0)useEffect(()=>subscribe(state.arr,()=>{total.current=state.arr.reduce((p,c)=>p+c)}),[])// ...

Update synchronously

functionTextBox(){constsnap=useSnapshot(state,{sync:true})return(<inputvalue={snap.text}onChange={(e)=>(state.text=e.target.value)}/>)}

Dev tools

import{devtools}from'valtio/utils'conststate=proxy({count:0,text:'hello'})constunsub=devtools(state,{name:'state name',enabled:true})

Use it vanilla

import{proxy,subscribe,snapshot}from'valtio/vanilla'// import { ... } from 'valtio/vanilla/utils'conststate=proxy({count:0,text:'hello'})subscribe(state,()=>{console.log('state is mutated')constobj=snapshot(state)// A snapshot is an immutable object})

useProxy util

import{useProxy}from'valtio/utils'conststate=proxy({count:1})constComponent=()=>{// useProxy returns a special proxy that can be used both in render and callbacks// The special proxy has to be used directly in a function scope. You can't destructure it outside the scope.const$state=useProxy(state)return(<div>{$state.count}<buttononClick={()=>++$state.count}>+1</button></div>)}

Computed properties

conststate=proxy({count:1,getdoubled(){returnthis.count*2},})

proxyWithHistory util

import{proxyWithHistory}from'valtio-history'conststate=proxyWithHistory({count:0})console.log(state.value)// ---> { count: 0 }state.value.count+=1console.log(state.value)// ---> { count: 1 }state.undo()console.log(state.value)// ---> { count: 0 }state.redo()console.log(state.value)// ---> { count: 1 }

proxySet util

import{proxySet}from'valtio/utils'conststate=proxySet([1,2,3])//can be used inside a proxy as well//const state = proxy({//    count: 1,//    set: proxySet()//})state.add(4)state.delete(1)state.forEach((v)=>console.log(v))// 2,3,4

proxyMap util

import{proxyMap}from'valtio/utils'conststate=proxyMap([['key','value'],['key2','value2'],])state.set('key','value')state.delete('key')state.get('key')// ---> valuestate.forEach((value,key)=>console.log(key,value))// ---> "key", "value", "key2", "value2"

Compatibility

Plugins

Recipes