Skip to main content
Module

x/valtio/docs/api/utils/watch.mdx

πŸ’Š Valtio makes proxy-state simple for React and Vanilla
Go to Latest
File
---title: 'watch'section: 'API'subSection: 'Utils'description: 'watch for changes.'---
# watch
#### subscription via a getter
This utility provides a specialized from of subscription. Proxy objects are tracked with a `get` function passed to the callback. Notice the callback will run eagerly as soon as a proxy is tracked, even if not yet mutated.
```jsimport { proxy } from 'valtio'import { watch } from 'valtio/utils'
const userState = proxy({ user: { name: 'Juuso' } })const sessionState = proxy({ expired: false })
watch((get) => { const expired = get(sessionState).expired const name = get(userState).user.name console.log(`${name}'s session is ${expired ? 'expired' : 'valid'}`)})// 'Juuso's session is valid'sessionState.expired = true// 'Juuso's session is expired'```
#### cleanup
You may return a callback function that runs after watch has evaluated its dependencies.
```jswatch((get) => { const expired = get(sessionState).expired const name = get(userState).user.name console.log(`${name}'s session is ${expired ? 'expired' : 'valid'}`) return () => { if (expired) { console.log('Cleaning up') } }})// 'Juuso's session is valid'sessionState.expired = true// 'Juuso's session is expired'setTimeout(() => { userState.user.name = 'Anonymous'}, 200)// 200ms -> 'Anonymous's session is expired"// 'Cleaning up' logged```
#### gotchas
If you remove the setTimeout in the example above, 'Juuso's session is expired' will become 'Anonymous's session is expired', logged twice. Valtio will batch updates by default. You may pass `{sync: true}` as a second argument to `watch` to disable batching.