Workaround for derived value dependency order limitation

[arahansen]

The docs are clear that derived values must declare dependencies first:

if you want a computed value to derive from another computed, you must declare the dependency first

I also noticed while this comment is in the proxyWithComputed documentation, the limitation also applies to derive (which makes sense).

I have a use case where I can't guarantee the order of computed values as the keys are defined at runtime from an external source.

My questions are:

• Is there are any workarounds for the documented limitation?
• Or alternatively is there the potential to propose a new API that could help mitigate this limitation?

Here is a simplified example of what I want to accomplish:

Codesandbox example

import { proxy, useSnapshot } from "valtio";
import { derive } from "valtio/utils";

const state = proxy({
  count: 0
});

derive(
  {
    // "sort of" works but `state.doubled` is stale and based on the previous derived value
    quadrupled: (get) => get(state).doubled * 2,
    // this works fine
    doubled: (get) => get(state).count * 2
  },
  { proxy: state }
);

export default function App() {
  const snap = useSnapshot(state);

  return (
    <div className="App">
      <button
        onClick={() => {
          state.count += 1;
        }}
      >
        +
      </button>
      <p>Count: {snap.count}</p>
      <p>Doubled: {snap.doubled}</p>
      <p>Quadrupled: {snap.quadrupled}</p>
    </div>
  );
}

As a proposal, would something like a defer wrapper be possible? Where a computed value in derive could be computed at property access time instead of derivation time?

Pseudo-code proposal:

derive(
  {
    // `quadrupled` wont get computed until accessed in a React component
    quadrupled: defer((get) => get(state).doubled * 2 || 0),
    doubled: (get) => get(state).count * 2
  },
  { proxy: state }
);

[arahansen]

In another discussion (#161), there was a recommendation to use function definitions + this

This approach appears to solve the dependency order issue.

I realized I could take that a step further and use getters so I don't have to make a function call and get the same <p>Quadrupled: {snap.quadrupled}</p> behavior:

const state = proxy({
  count: 0 ,
  get quadrupled() {
    return this.doubled * 2;
  },
  get doubled() {
    return this.count * 2;
  }
});

So far in my testing this appears to work. Are there any gotchas I should be aware of with this approach? Or would this be the recommended workaround?

One issue I'm not sure how to fix is that it doesn't seem possible to memoize the computation of these values so quadrupled only gets re-computed when this.count actually changes. Am I missing something there?

[dai-shi]

So, it sounds that derive or proxyWithComputed is unnecessary in the first place for your use case. proxy and useSnapshot do the job.

If your computation is really heavy and need to avoid re-computation, you might want to consider memoizing selectors. My suggestion is proxy-memoize, but other libs like reselect will work too. Of course, derive and proxyWithComputed is native solutions, but if they don't work for you, those other libs would help.

[dai-shi]

Is there are any workarounds for the documented limitation?

I guess if you can create two separate derived proxies, it should work.

Or alternatively is there the potential to propose a new API that could help mitigate this limitation?

Hmm. No, we don't want to add another complexity. If we find a solution without changing the API, it's worth to consider.