proxyWithComputed

add a computation to a proxy

You can define own computed properties within a proxy. By combining with a memoization library such as proxy-memoize, optimizing function calls is possible.

Be careful not to overuse proxy-memoize because proxy-memoize and useSnapshot do similar optimization and double optimization may lead to less performance.

import memoize from 'proxy-memoize'
import { proxyWithComputed } from 'valtio/utils'

const state = proxyWithComputed({
  count: 1,
}, {
  doubled: memoize((snap) => snap.count * 2)
})

// Computed values accept custom setters too:
const state2 = proxyWithComputed({
  firstName: 'Alec',
  lastName: 'Baldwin'
}, {
  fullName: {
    get: memoize((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: memoize((snap) => snap.count * 2),
  quadrupled: memoize((snap) => snap.doubled * 2)
})

The last use case fails to infer types in TypeScript #192.