derive

Installation

npm install derive-valtio

create a new proxy derived from others

You can subscribe to some proxies using get to create snapshots used to compute new values.

import { derive } from 'derive-valtio'

// 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,
  },
)

underive

stop evaluating

In some cases you may want to unsubscribe after deriving a proxy. To do so, use the underive util. You may also pass keys to indicate which properties you want to unsubscribe. If you specify delete option, it will delete the properties and you can attach new derived properties.

import { derive, underive } from 'derive-valtio'
const state = proxy({
  count: 1,
})

const derivedState = derive({
  doubled: (get) => get(state).count * 2,
})

underive(derivedState)

Usage patterns

Re-computes when unrelated properties change

With derive, the computation will occur if any property of the base proxy changes. Example:

const baseProxy = proxy({
  counter1: 0,
  counter2: 0,
  counter3: 0,
  counter4: 0,
})

const countersOneAndTwoSelectors = derive({
  sum: (get) => get(baseProxy).counter1 + get(baseProxy).counter2,
})

In this example if baseProxy.counter3 or baseProxy.counter4 are changed, countersOneAndTwoSelectors will re-compute all of the keys in it.

get sub-objects due to update of unrelated proxies on parent proxy

As noted on this page, re-computation occurs when unrelated properties change. It is possible to use get on sub-objects. This has the benefit of not re-computing when properties of the parent object are updated. Example:

const baseProxy = proxy({
  counter1And2: {
    counter1: 0,
    counter2: 0,
  },
  counter3: 0,
  counter4: 0,
})

const countersOneAndTwoSelectors = derive({
  sum: (get) =>
    get(baseProxy.counter1And2).counter1 + get(baseProxy.counter1And2).counter2,
})

Now even if counter3 and counter4 are updated, it will not cause re-computation of countersOneAndTwoSelectors.