Skip to main content
Jotai’s state resides in React, but sometimes it would be nice to interact with the world outside React. Valtio provides a proxy interface that can be used to store some values and sync with atoms in Jotai. This only uses the vanilla api of valtio.

​
Install

You have to install valtio and jotai-valtio to use this feature. 
npm install valtio jotai-valtio

​
atomWithProxy

atomWithProxy creates a new atom with valtio proxy. It’s two-way binding and you can change the value from both ends. 
import { useAtom } from 'jotai'
import { atomWithProxy } from 'jotai-valtio'
import { proxy } from 'valtio/vanilla'

const proxyState = proxy({ count: 0 })
const stateAtom = atomWithProxy(proxyState)
const Counter = () => {
  const [state, setState] = useAtom(stateAtom)

  return (
    <>
      count: {state.count}
      <button
        onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        inc atom
      </button>
      <button
        onClick={() => {
          ++proxyState.count
        }}
      >
        inc proxy
      </button>
    </>
  )
}

​
Parameters

atomWithProxy(proxyObject, options?)
proxyObject (required): the Valtio proxy object you want to derive the atom from options.sync (optional): makes the atom update synchronously instead of waiting for batched updates, similar to valtio/useSnapshot. This will result in more renders, but have more guarantees that it syncs with other Jotai atoms. 
atomWithProxy(proxyObject, { sync: true })

​
mutableAtom

mutableAtom wraps a value in a self-aware Valtio proxy. You can make changes to it in the same way you would to a normal js-object. Count value is stored under the value property. 
const countProxyAtom = mutableAtom(0)

function IncrementButton() {
  const countProxy = useAtomValue(countProxyAtom)
  return <button onClick={() => ++countProxy.value}>+</button>
}

​
Parameters

mutableAtom(value, options?)
value (required): the value to proxy. options.proxyFn (optional): allows customization with proxyFn for custom proxy functions. Can be proxy (default) or a custom function.

​
Caution on Mutating Proxies

Be careful to not mutate the proxy directly in the atom’s read function or during render. Doing so could cause an infinite render loop. 
const countProxyAtom = mutableAtom(0)

atom(
  (get) => {
    const countProxy = get(countProxyAtom)
    ++countProxy.value // This will cause an infinite loop
  },
  (get, set) => {
    const countProxy = get(countProxyAtom)
    ++countProxy.value // This is fine
  },
)

Build docs developers (and LLMs) love

Get started for freeTalk to us