What's the best way to do "efficient" derived/computed proxies that only use certain features of the source?

[tomhicks]

I'll start with an example:

const elementsProxy = proxy<Record<string, {name: string; parentId: string | null}>>({});

const adjacencyList = derive({
  list: (get) => makeAdjacencyList(get(elementsProxy))
})

This kind of example is cited in the docs as always being called whenever anything changes in the proxy. This means that if names change, the adjacency list is recalculated, which can be bad for performance.

One way we've worked around this in the past is to use subscribe like this:

const adjacencyList = proxy<Record<string, string[]>>({});
subscribe(elmentsProxy, (ops) => {
  ops.forEach(([op, path, value]) => {
    // inspect the changes and make precise updates to the adjacency list proxy as required
  })
})

Is this just the natural way to work with valtio in a performance critical scenario? Are we missing a trick?

[dai-shi]

Valtio design is to optimize rerenders with objects. So, the best practice is to create nested objects.

Something like:

const elementsProxy = proxy<Record<string, {name: { value: string }; parentId: { value: string | null }}>>({});